Deep dive into content projection - Eudes Petonnet

What people said

Recommends tlt · 2018-06 · Stack Overflow · on “Angular module/component - display on own as well as inside another module/component?”

not sure i understand you 100% but on first reading seems like you need `content projection`. good video on the topic: [this video]

Recommends Horace Lee · 2018-08 · Stack Overflow · on “How can I achieve delayed component projection in Angular 6?”

The source of your problem is that <ng-content> happens during build-time - any component you project into it will be created during build-time rather than during run-time! ( source [this video] ) This is why, in your StackBlitz, the <app-action> component already starts counting before it is even displayed on screen. Instead of using <ng-content> for delayed content projection, you should use the following method. (Check out the StackBlitz demo [LINK] to see that it works as expected) Create a structural directive A structural directive is a directive that changes the DOM structure , such as by adding, removing, or manipulating elements. For example, ngIf and ngFor are structural directives. The

Recommends Jota.Toledo · 2019-01 · Stack Overflow · on “How do I conditionally wrap <ng-content> multiple times?”

The updated approach is the correct way to embed transcluded content in multiple places. Theres no more to it. You might want to watch [this video]

Recommends Andrei Gătej · 2020-03 · Stack Overflow · on “Angular 8: How to use a Multi-Content-Projection / Multiple-Transclusion slot twice?”

Maybe this talk [this video] is going to be useful. My understanding is that ng-content does not create content, it simply moves content from one part to another. I think the solution to your problem is to use ng-template . For example: projected.component.ts let instances = 0; @Component({ selector: 'app-projected', template: `projected instance nr: {{ instanceId }}` }) export class ProjectedComponent implements OnInit { instanceId: number; constructor() { } ngOnInit() { this.instanceId = ++instances; } } parent.component.ts @Component({ selector: 'app-parent', template: ` <h3>Parent component</h3> <p>Using content #1</p> <ng-container *ngTemplateOutlet="content"></ng-container> <p>Using content

Cites Horace Lee · 2018-08 · Stack Overflow · on “Angular Child binding and transclusion”

Here's a solution that uses structural directives and NgTemplateOutlet to achieve the result you want. See this StackBlitz link [LINK] for the full code. Usage Starting HTML: ( app.component.html ) <my-table-component [Items]="Items"> <my-column-component> <my-cell *columnHeader>The Id</my-cell> <my-cell *columnCells="let Item">{{Item.Id}}</my-cell> </my-column-component> <my-column-component> <my-cell *columnHeader>The Name</my-cell> <my-cell *columnCells="let Item"><span>{{Item.Name}}</span></my-cell> </my-column-component> <my-column-component> <my-cell *columnHeader>The Avatar</my-cell> <my-cell *columnCells="let Item"><img src="{{Item.Picture}}" /></my-cell> </my-column-component> </my-

Cites Radik · 2020-05 · Stack Overflow · on “Angular Circular Module import”

Maybe you can use content projection [this video] with ng-content directive to compose nested components, but it depends how you need to compose them, in example [LINK] // ComposeModule @NgModule({ imports: [ CommonModule, AppWordModule, AppTestModule ], declarations: [CompositionComponent], exports: [CompositionComponent] }) export class ComposeModule { } // composition.component.html <app-word> <app-child-one header> <app-word body> </app-word> </app-child-one> <app-child-two body> <app-word body> </app-word> </app-child-two> </app-word> // AppWordModule @NgModule({ imports: [ CommonModule ], declarations: [ WordComponent ], exports: [ WordComponent ] }) export class AppWordModule { } // word.c