Breadcrumb routing difficulties

Here is an example of the routing module structure.

  const routes: Routes = [
{
  path: '',
  data: {
    title: 'Buildings'
  },
  children: [
    {
      path: 'buildings',
      component: BuildingsComponent,
      data: {
        title: 'Buildings'
      }
    },
    {
      path: 'buildings/building-detail',
      component: BuildingDetailComponent,
      data: {
        title: 'Building Detail'
      }
    },
    {
      path: 'buildings/building-detail/:id',
      component: BuildingDetailComponent,
      data: {
        title: 'Building Deatil'
      }
    }        
  ]
}

];

So I am using Angular and have created a breadcrumb that has the following structure...

Home -> Buildings -> Building Detail

Everything is so close to working. The only thing I cannot do is return to Buildings when in Building Detail. I have tried absolutely everything and wondered if anyone can see what jumps out.

Here is a button that I use to click from Buildings into Building Detail.

      <button type="button" [routerLink]="['../buildings/building-detail/']" class="button button- 
      primary"><span>Add</span></button> 

So when I click the Buildings element within Building Detail I get taken to the home page. I figured I should be putting a redirectTo:'buildings' in the top level path. As soon as I do that my click through from the above add button fails.

This is complicated and I have resorted to trial and error but I am going round in circles. I'm using Bootstrap for the breadcrumb.

Thanks for any advice.