Angular Material: Why does using router-outlet within mat-toolbar swap toolbar row order

Question

I have a use case, which I haven't found in any Angular demos or tutorials, where I wish to dynamically add/remove the second row of an Angular Material toolbar using Angular routing. Specifically, toolbar row-1 shall be for app navigation and toolbar row-2 shall offer additional, page specific functions once that page is loaded.

I have what I thought was a solution but I'm finding that the build process produces html which takes the <router-outlet> element and always places it as the first element immediately after <mat-toolbar> . The build does this without warning or error. I suspect this arrangement is implicitly illegal, but as I said, I can find no documentation on this.

Q. Can anyone explain this behaviour and perhaps offer an alternative solution ?

The distilled demo code can be found here in stackblitz . Below, you will find:

• Key sections of code.
• The resulting snippet of html from the Angular build process

---

app.component.html

Contains an Angular Material toolbar and, within that, the router-outlet placeholder for the option of a second mat-toolbar-row .

<mat-toolbar>
  <mat-toolbar-row>
    <h2>This is toolbar row-1</h2>
  </mat-toolbar-row>

  <!-- Toolbar row #2 -->
  <router-outlet></router-outlet>
</mat-toolbar>

app-routing-module

Contains some routing to switch a mat-toolbar-row in and out.

const routes: Routes = [
  { path: 'toolbar', component: ToolbarRowComponent },
  { path: '', redirectTo: '', pathMatch: 'full' }
];

toolbar-row.component.html

The mat-toolbar-row for row-2 itself ...

<mat-toolbar-row>
  <h2>This is toolbar row-2</h2>
</mat-toolbar-row>

Debugger ouput snippet showing the resulting html

<mat-toolbar _ngcontent-c0="" class="mat-toolbar mat-toolbar-multiple-rows">
  <router-outlet _ngcontent-c0=""></router-outlet>
  <app-toolbar-row _nghost-c2="">
    <mat-toolbar-row _ngcontent-c2="" class="mat-toolbar-row">
      <h2 _ngcontent-c2="">This is toolbar row-2</h2>
    </mat-toolbar-row>
  </app-toolbar-row>
  <mat-toolbar-row _ngcontent-c0="" class="mat-toolbar-row">
    <h2 _ngcontent-c0="">This is toolbar row-1</h2>
  </mat-toolbar-row>
</mat-toolbar>

Answer 1

It would appear that mat-toolbar with multiple mat-toolbar-rows has a demand that the toolbar rows are explicitly defined within the scope of the mat-toolbar . With regard to my original problem described above, if I directly replace router-outlet with the component selector app-toolbar-row , errors are now raised in the debug console. Clearly mat-toolbar is quite sensitive to using proxies for mat-toolbar-row within its scope.

At the very least, the lack of an error/warning regarding the use of router-outlet is a defect in Angular Material.

EDIT: I have updated the above stackblitz to reflect this simpler test code scenario.