I have a table component <app-root-table></app-root-table>

and want to insert inside the table a feature component <app-table-insert></app-table-insert>

<table mat-table [dataSource]="tableData$" class="mat-elevation-z8">
  <ng-container
    matColumnDef="{{ column }}"
    *ngFor="let column of tableColumnNames$ | async"
  >
    <th mat-header-cell *matHeaderCellDef>{{ column }}</th>
    <td mat-cell *matCellDef="let element">{{ element[column] }}</td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="tableColumnNames$ | async"></tr>

  <app-table-insert
    [tableData$]="tableData$"
    [tableColumnNames$]="tableColumnNames$"
  ></app-table-insert>

  <ng-container *ngIf="false">
    <tr
      mat-row
      *matRowDef="let row; columns: tableColumnNames$ | async"
      class="example-detail-row"
    ></tr>
  </ng-container>
</table>

the component gets loaded but does not appear in the DOM , why ?

stackblitz