Link : https://angular.io/guide/content-projection
Content projection user to create flexible, reusable components.
- Single-slot content projection. With this type of content projection, a component accepts content from a single source.
- Multi-slot content projection. In this scenario, a component accepts content from multiple sources.
- Conditional content projection. Components that use conditional content projection render content only when specific conditions are met.
Example
<h2>Multi-slot content projection</h2> Default: <ng-content></ng-content> Question: <ng-content select="[question]"></ng-content>
<app-zippy-multislot> <p question> Is content projection cool? </p> <p>Let's learn about content projection!</p></app-zippy-multislot>
--
<ng-container left-panel [ngTemplateOutlet]="leftPanel"> </ng-container>
<ng-template #leftPanel>
code
</ng-template>
<div *ngIf="expanded" [id]="contentId"> <ng-container [ngTemplateOutlet]="content.templateRef"></ng-container></div>
<ng-template appExampleZippyContent> It depends on what you do with it. </ng-template>
The <ng-template> element defines a block of content that a component can render based on its own logic.
