ng container and ng template code example

Example 1: ngTemplate

<div *ngIf='name && lastName; then thereAreParams else thereArentAnyParams'>

</div>

<ng-template #thereAreParams>
  <h2>Name is : {{name}} </h2>
   <h2>Last name is : {{lastName}} </h2>
</ng-template>

<ng-template #thereArentAnyParams>
  <h2>There aren't any parameters</h2>
</ng-template>

Example 2: ng-container vs ng-template

<div>
  Pick your favorite hero
  (<label><input type="checkbox" checked (change)="showSad = !showSad">show sad</label>)
</div>
<select [(ngModel)]="hero">
  <ng-container *ngFor="let h of heroes">
    <ng-container *ngIf="showSad || h.emotion !== 'sad'">
      <option [ngValue]="h">{{h.name}} ({{h.emotion}})</option>
    </ng-container>
  </ng-container>
</select>

Tags:

Html Example

Related