Property binding:
<input [value]="myVariable">Interpolation:
<div>{{ myVariable }}</div>Event binding:
<input (click)="doStuff()">@for (item of itemCollection) {
<div>{{ item.name }}</div>
}
@if (showMe) {
<div>Show this if showMe is true</div>
}<div *ngFor="let item of itemCollection">{{ item.name }}</div>
<div *ngIf="showMe">Show this if showMe is true</div>@Input()
myParameter: SomeType;Template:
<input [formControl]="myInput">Component:
public myInput = new FormControl('');
myInput.valueChanges.subscribe...constructor(service1: ServiceOne, private service2: ServiceTwo, public service3: ServiceThree) {
// Access to all three services
}
someFunction() {
// Access to service2 and service3
}
// service3 will be accessible in the html template as well as derived classes.{{ observable$ | async | json }}
observable$.pipe(
map(o => o.someNumberProperty),
filter(n => n > 5),
take(5)
).subscribe(number => {
console.log('received a number', number)
});
const streamOfData$ = urlsToQuery$.pipe(
flatMap(url => requestDataFrom(url)
));Noteworthy: filter, map, merge, debounceTime, tap, switchMap