Insert a component into another parent component and pass data

Question

Is it possible to insert a component into another parent component and pass data to the child component from the parent component?

User Component
Table Component
Detail Component

in user.html

<app-table>
  <app-detail></app-detail>
</app-table>

in table.html

<div *ngFor="let item of items">
  <ng-content [item]="item"></ng-content> (its my problem)
</div>

Could you please clarify? Do you want to pas data between siblings, or other way? What the expected structure? Where is User component in this structure? — Alex Vovchuk, Oct 08 '19 at 19:31
Are you asking about `@Input`?. In your question you put `` I supouse you want to say `` — Eliseo, Oct 08 '19 at 19:52
Go through this article https://angularfirebase.com/lessons/sharing-data-between-angular-components-four-methods/ you will get everything you want — Sudarshana Dayananda, Oct 08 '19 at 19:54
@Eliseo Look at the picture. There are three components in the case. — Rafael L R, Oct 08 '19 at 19:59

Alex Vovchuk · Answer 1 · 2019-10-08T19:58:43.193

You can use ngTemplateOutlet: https://angular.io/api/common/NgTemplateOutlet

<app-user>
  <app-table [cardTemplate]="pCard"></app-detail>
</app-user>

<ng-template let-record #pCard>
    <div class="card">

    </div>
</ng-template>

Table component:

<div class="nsCard">
    <ng-container *ngTemplateOutlet="cardTemplate; context:{$implicit: record}"></ng-container>
</div>

And inside table component:

@Input() cardTemplate: TemplateRef<any>;

Actually it is more advanced form of ng-template, that provides ability to pass data and many others.

Insert a component into another parent component and pass data

1 Answers1

Linked