Please enable JavaScript.

Coggle requires JavaScript to display documents.

Advance Angular - Coggle Diagram

- - - - The container is also used as a placeholder for injecting a dynamic template using the ngTemplateOutlet
        
        <ng-container *ngTemplateOutlet="loading"></ng-container>
- - - - <ng-container *ngTemplateOutlet="sayHelloTemplate">This text is not displayed</ng-container>
        
        ng-template can be use with ngIf, then & else and only render with help of at least one structural directives
- - - - ng-content also allows us to create multiple slots using the selector attribute. The parent can send different content to each slot
        
        <button><ng-content></ng-content></button>
        
        output <button>click me</button>
        
        <div class="card"><div class="header"><ng-content select="header" ></ng-content></div><div class="content"><ng-content select="content" ></ng-content></div><div class="footer"><ng-content select="footer" ></ng-content></div></div>
        
        <app-card><header><h1>Angular</h1></header><content>One framework. Mobile & desktop.</content><footer><b>Super-powered by Google </b></footer></app-card>
        
        if any projection does not find its place holder it won't display
        
        You can use any CSS selector as the select attribute to find its placeholder
        
        ngProjectAs Sometimes it becomes necessary to wrap the component using the ng-container we project
        
        1 more item...
        
        same parent content
- - - - <ng-template let-name="nameVar" let-message="messageVar" #template3> <p>Dear {{name}} , {{message}} </p></ng-template>
        
        <ng-container [ngTemplateOutlet]="templates" [ngTemplateOutletContext] ="{nameVar:'Guest',messageVar:'Welcome to our site'}"></ng-container>