שינוי רצף התצוגה – Directives

<h2 *ngIf="true">Some heading</h2>

<h2 *ngIf="propName">Some heading</h2>

<h2 *ngIf="displayName; else elseBlock">Some heading</h2>
<ng-template #elseBlock>
  <h2>Alternative heading</h2>
</ng-template>

<div *ngIf="displayName; then thenBlock; else elseBlock"></div>
<ng-template #thenBlock>
  <h2>First heading</h2>
</ng-template>
<ng-template #elseBlock>
  <h2>Alternative heading</h2>
</ng-template>

<div [ngSwitch]="color">
  <div *ngSwitchCase="'red'">Picked red</div>
  <div *ngSwitchCase="'green'">Picked green</div>
  ...
  <div *ngSwitchDefault>Pick again</div>
</div>

public color = 'red';

public colors = ['red', 'green', 'blue'];

<div *ngFor="let color of colors">
  <h2>{{ color }}</h2>
</div>

<div *ngFor="let color of colors; index as i"> ... </div>
<div *ngFor="let color of colors; first as f">first return true if the element is the first</div>
<div *ngFor="let color of colors; last as l"> ... </div>
<div *ngFor="let color of colors; odd as o"> ... </div>
<div *ngFor="let color of colors; even as e"> ... </div>

<input type="text" #myVariable>

<p>{{ myVariable.value }}</p>

<input type="text" #myVariable (keyup)="0"/>

<input type="text" #myVariable>
<button (click)="sayHello(myVariable)"></button>

sayHello(inputEl: HTMLInputElement) {
    console.log('Hello ' + inputEl.value);
}