Angular: Content Projection end to end

Content projection is a pattern in which you insert the content that you want to show inside another component.

<ng-content></ng-content> - responsible to project content inside another component. It is just a placeholder and will be replaced by actual projected content.

There are several ways of doing this in Angular:

1. Single-slot content projection: other component accepts content from single source

<!--app.component.html--> <app-child> <p>project this content</p> </app-child> <!--child.component.html--> <p>Single-slot content projection</p> <ng-content></ng-content> 

output:

1. Multi-slot content projection: Component accepts content from multiple sources. Hence, we must specify where to project content. We can accomplish this task by select attribute of <ng-content>

<!--app.component.html--> <app-child> <p> First project content </p> <p select="[foo]"> foo project content </p> <p select="[bar]"> bar project content </p> <p> Lastly projected content </p> </app-child> <!--child.component.html--> <h2>Multi-slot content projection</h2> <ng-content></ng-content> <ng-content #foo></ng-content> <ng-content #bar></ng-content> 

output:

Note: An element without a select attribute receives all projected components that do not match any of the other elements.

• If you observe above the Lastly projected content doesn't have any select but still projected via empty ng-content.

1. Conditional Content Projection: Achieved using <ng-template> and ngTemplateOutlet directive.

<h2>Conditional Content Projection</h2> <p>Basic Template outlet Implementation</p> <ng-template #template1> <p>template info</p> </ng-template> <p>It prints before templateInfo</p> <ng-container *ngTemplateOutlet="template1"> </ng-container> 

ngTemplateOutlet is a structural directive used to insert ng-template in various sections of DOM.

User can use any element like div. But div won't be rendered

 <div *ngTemplateOutlet="template1"></div> 

Output:

We can also pass value to ngTemplateOutlet using ngTemplateOutletContext property.

<p>Passing value to template outlet</p> <ng-template let-value="value" #template2> <p>Value recieved: {{ value }}</p> </ng-template> <ng-container [ngTemplateOutlet]="template2" [ngTemplateOutletContext]="{ value: 100 }" > </ng-container> <!--Alternatively--> <ng-container *ngTemplateOutlet="template2; context: { value: 100 }" ></ng-container> 

We can also send multiple values.

Output:

You can view the complete output here:

Please let me know if I miss to cover any cases.

You can follow me: https://twitter.com/urstrulyvishwak

Thanks