Angular Template Syntax
Microsyntax
If :
<div *ngIf="hero" class="name">{{hero.name}}</div>
for (loop):
<ul>
<li *ngFor="let hero of heroes">{{hero.name}}</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
Render data
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
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 :
{{var | func1 | func2 | func3 }}
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:
{{var | func1:10}}