Post published over one year ago
If :
<div *ngIf="hero" class="name"></div>
for (loop):
<ul>
<li *ngFor="let hero of heroes"></li>
</ul>
switch:
<div [ngSwitch]="hero?.emotion">
<app-happy-hero *ngSwitchCase="'happy'" [hero]="hero"></app-happy-hero>
<app-sad-hero *ngSwitchCase="'sad'" [hero]="hero"></app-sad-hero>
<app-confused-hero *ngSwitchCase="'confused'" [hero]="hero"></app-confused-hero>
<app-unknown-hero *ngSwitchDefault [hero]="hero"></app-unknown-hero>
</div>
Interpolation is the most common syntax in our html. As we mentioned, for each component, we have a css file, a html file and a ts script file as the script behind, if we declare a variable in script behind, we can use interpolation to render it directly in html:
<h3>Current customer: {{ currentCustomer }}</h3>
Notice that html tag is not allowed to appear in script behind, unlike jsx in react.
However, only the “name” of variable will be rendered, so if we have {{1+2}}
, this will be calculated and rendered as 2
, same as other functions/API when using interpolation.
Besides, you can use **operators ** to tell more information :
{{var!}}
tell angular that var must exist.
{{var?}}
tell angular that var can be undefined.
{{var | func}}
tell angular that render the output from pipe func
, with the input of var.
Pipes like filters in liquid or jinja, but more powerful, and easier to understand.
The basic concept is that :
if we have a serious methods in our script called fun1
, fun2
, func3
, each will accept a data input , and return its output data.
We want our variable, var
, to be processed via these functions, like we want to get fun3(func2(func1(var)))
To do this directly in interpolation, we use pipe and the final syntax is :
However, we need to declare functions like func1
is our custom pipes, we can put pipes in a separate file:
For example, our func
accept input and plus its parameter (default is 1)
//your-component.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'func1'})
export class CustomPipe implements PipeTransform {
transform(value: number,plus?:number): number {
return plus? number+plus : number+1;
}
}
Here’s how to use pipes with attribution: