How to project the mat-toolbar-row content one after the other while creating the Custom component by wrapping angular material 6 toolbar component

Question

Actually I am creating a custom component by wrapping the Angular material Toolbar component. I have wrapped the first element mat-toolbar by using ng-content, and also wrapped the second element mat-toolbar-row using ng-content only.

Here i am facing some issue while projecting the second or more than one mat-toolbar-row, because it is not displaying it in the next line as next toolbar-row, it is displaying the second toolbar content in first row only.As I know ng-content is static projection, so it is projecting the second toolbar row in the first row , how can i resolve this issue.

Please the find stackblitzLink here and I have shown the material example also below the custom component. Please help me in resolving this issue. Thanks in advance.

Answer 1

<mat-toolbar [color]="color">
  <ng-content></ng-content>
  <ng-container select="sq-toolbar-row">
  <mat-toolbar-row >
  </mat-toolbar-row>
  </ng-container>
</mat-toolbar>

Answer 2

For anyone who is still looking for an answer here, I ended up wrapping the <mat-toolbar-row></mat-toolbar-row> with a <ng-container></ng-container> tag.

Before I had the customized Toolbar component like this:

<mat-toolbar>
  <mat-toolbar-row>
    ...
  </mat-toolbar-row>
  <ng-content select="mat-toolbar-row"></ng-content>
</mat-toolbar>

And I changed it to this:

<mat-toolbar>
  <ng-container>
    <mat-toolbar-row>
      ...
    </mat-toolbar-row>
  </ng-container>
  <ng-content select="mat-toolbar-row"></ng-content>
</mat-toolbar>

Somehow the <ng-container></ng-container> tag makes the toolbar rows arrange in correct order.