CODEWITHSUNDEEP
angularangular-materialangular-routing
WillMcF
WillMcF

Reputation: 83

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

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:

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>

Upvotes: 0

Views: 912

Answers (1)

WillMcF
WillMcF

Reputation: 83

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.

Upvotes: 0

Related Questions