CODEWITHSUNDEEP
angulartypescriptangular-components
Tea-Kay
Tea-Kay

Reputation: 11

Angular 5: How to embed a component into another

imagine, I have a generic table component with expandable rows and I need to inject another dynamic content (a dynamic SVG in this case) into this expandable rows from within a component, that uses the table.

Example:

my-table.component.html

// my-table-component

...

<ng-container matColumnDef="expandedDetail">

  <mat-cell *matCellDef="let detail; let i = index;">
    <ng-container>
      <div>

          <ng-content>here goes an SVG</ng-content>

      </div>
    </ng-container>

  </mat-cell>
</ng-container>

...

my-parent.component.html

  <my-table *ngIf="tableData" [dataSource]="tableData [tableConfig]="tableConfig">

    <!-- this should go to ng-content in my-table with row specific data -->
    <my-svg [data]="my--data | async" [options]="my-options"> </my-svg>

  </my-table>

The problems here are,

We have also tried ViewChild and templateRef and got no solution. Do you have any ideas?

Upvotes: 0

Views: 767

Answers (1)

Tea-Kay
Tea-Kay

Reputation: 11

Finally, we found a solution using ngTemplateOutlet, and a ngIf condition:

Solution:

my-table.component.html

<ng-template #content><ng-content></ng-content></ng-template>
<div *ngIf="detail.element.expansionId == expandedElement">
   <ng-container *ngTemplateOutlet="content"></ng-container>
</div>

Thanks @all

Upvotes: 1

Related Questions