Menu
Alternatively, (and preferably), you can also use the ng-template element by prefixing an asterisk (*), which is the shorthand syntax. For instance, *ngIf, *ngFor. These directives are very common in Angular, and are present almost everywhere either implicitly or explicitly.
When we use *ngFor , we're telling Angular to essentially treat the element the * is bound to as a template. Angular's <ng-template> element is not a true Web Component (unlike <template> ).
ng-container serves as a container for elements which can also accept structural directives but is not rendered to the DOM, while ng-template allows you to create template content that is not rendered until you specifically (conditionally or directly) add it to the DOM.
To sum up, ng-content is used to display children in a template, ng-container is used as a non-rendered container to avoid having to add a span or a div, and ng-template allows you to group some content that is not rendered directly but can be used in other places of your template or you code.
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 the host element, like this.
<ng-template [ngIf]="hero"> <div>{{hero.name}}</div></ng-template>
- The *ngIf directive moved to the element where it became a property binding,[ngIf].
- The rest of the , including its class attribute, moved inside the element.
So for it we have ng-container
<ng-container *ngIf="seat.section">
Section {{seat.section}} ,
</ng-container>
or use span or div or regular html tag.
<span *ngIf="seat.section">
Section {{seat.section}} ,
</span>
or if you still want to use ng-template (not recommended)
<ng-template [ngIf]="seat.section">
Section {{seat.section}} ,
</ng-template>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With