ng-template – Tarik Billa

Passing ngFor variable to an ngIf template

December 25, 2023 by Tarik

All you need is to use [ngTemplateOutletContext] Read More Here is the way how you can achieve that : <div> <h3>All Templates</h3> <ul *ngFor=”let number of numbers”> <ng-container [ngTemplateOutlet]=’number % 2 == 0 ? even_tpl : odd_tpl’ [ngTemplateOutletContext]=”{number:number}”></ng-container> </ul> </div> <ng-template #odd_tpl let-number=”number”> <li>Odd: {{number}}</li> </ng-template> <ng-template #even_tpl let-number=”number”> <li>Even: {{number}}</li> </ng-template> WORKING DEMO

How to include an ng-template element without a condition in Angular 2

December 4, 2023 by Tarik

<ng-template #myTemplate> <h1>Some Header</h1> <p>Some text…</p> </ng-template> <ng-container *ngTemplateOutlet=”myTemplate”> </ng-container> We can definitely use ‘ng-container’ to instantiate the ‘myTemplate‘ template on the page. We are referring to the ‘myTemplate‘ template via its template reference #myTemplate, and we are using the ngTemplateOutlet structural directive to render the template. ngTemplateOutlet directive inserts an embedded view from a … Read more

why *ngIf doesnt’work with ng-template?

June 30, 2023 by Tarik

Read the doc here https://angular.io/guide/structural-directives especially for <div *ngIf=”hero” >{{hero.name}}</div> The asterisk is “syntactic sugar” for something a bit more complicated. Internally, Angular desugars it in two stages. First, it translates the *ngIf=”…” into a template attribute, template=”ngIf …”, like this. <div template=”ngIf hero”>{{hero.name}}</div> Then it translates the template attribute into a element, wrapped around … Read more

What are practical scenarios of *ngTemplateOutlet directive?

June 8, 2023 by Tarik

Angular template outlets can be used to insert a common template in various sections of a view that are not generated by a loop or subject to a condition. For example, you can define a template for the logo of a company and insert it in several places in the page: <div> <ng-container *ngTemplateOutlet=”companyLogoTemplate”></ng-container> <h1>Company … Read more

What is $implicit in angular 2?

March 2, 2023 by Tarik

You can define local variables on ng-template through let-name When angular creates a template by calling createEmbeddedView it can also pass context that will be used inside ng-template Using the key $implicit in the context object will set its value as default. So if we write: vcRef.createEmbeddedView(template, { $implicit: ‘value’ }) and we have the … Read more

Angular – ng-template with parameter inside ngIf inside ngFor [duplicate]

December 25, 2022 by Tarik

You can do it like : <ul> <li *ngFor=”let link of links”> <ng-container [ngTemplateOutlet]=”link.type == ‘complex’ ?complexLink : simpleLink” [ngTemplateOutletContext]=”{link:link}”> </ng-container> </li> </ul> <ng-template #simpleLink let-link=’link’> Simple : {{ link.name }} </ng-template> <ng-template #complexLink let-link=’link’> Complex : {{ link.name }} </ng-template> WORKING DEMO