export class Component implements OnInit {
ngOnInit() {}
}
export class Component implements OnChanges {
ngOnChanges() {}
}
export class Component implements AfterViewInit {
ngAfterViewInit() {}
}
export class Component implements OnDestroy {
ngOnDestroy() {}
}
<p *ngIf="expression; else notExpression">
Expression is true
</p>
<ng-template #notExpression>
<p>
Expression is false
</p>
</ng-template>
<ul>
<li *ngFor="let element of array"></li>
</ul>
<ng-container [ngSwitch]="switch_expression">
<p *ngSwitchCase="match_expression_1"> 1 </p>
<p *ngSwitchCase="match_expression_2"> 2 </p>
<p *ngSwitchDefault> default </p>
</ng-container>
@Input() myProperty;
@Output() myEvent = new EventEmitter();
@HostBinding('class.error') hasError;
@HostListener('click', ['$event']) onClick(e) {...}
@ContentChild(myPredicate) myChildComponent;
@ContentChildren(myPredicate) myChildComponents;
@ViewChild(myPredicate) myChildComponent;
@ViewChildren(myPredicate) myChildComponents;
<p>{{ name }}</p>
<input [value]="name" />
<button [attr.aria-label]="OK">OK</button>
<input [(ngModel)]="name"/>
<input [value]="name"
(input)="name = $event.target.value" />
<p [ngStyle]="{'color': 'blue'}">...</p>
<p [ngClass]="'first second'">...</p>
<p [ngClass]="['first', 'second']">...</p>
<p [ngClass]="{'first': true, 'second': false}">...</p>
<p [ngClass]="stringExp|arrayExp|objExp">...</p>
<p [ngClass]="{'class1 class2 class3' : true}">...</p>
<p> {{name | lowercase}}</p>
<p> {{name | uppercase}}</p>
<p> {{ today | date: 'medium'}}</p>
<p> {{ today | date: 'y-MM-d'}}</p>
<p> {{ 3.5 | currency: '€'}}</p>
<p> {{ 0.5 | percent: '1.2'}}</p>
<p> {{ 0.5 | number: '1.2'}}</p>
<router-outlet name="aux"></router-outlet>
<a routerLink="/path">
<a [routerLink]="[ '/path', routeParam ]">
<a [routerLink]="[ '/path',
{ matrixParam: 'value' } ]">
<a [routerLink]="[ '/path' ]"
[queryParams]="{ page: 1 }">
<a [routerLink]="[ '/path' ]"
fragment="anchor">