Angular. Pipes
Angular pipes are analogues of AngularJS filters. They transform data before output it in component template.
Angular has several built-in pipes (date, uppercase, lowercase, currency, decimal, percent). Also developer can create his own pipes. Pipe is a class, realize transform method of PipeTransform interface.
Code lesson (pipe)
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'rolesCount'
})
export class RolesCountPipe implements PipeTransform {
transform(value: string[], ...args: unknown[]): string {
if (args[0] === 'rus') {
return `${value.length} ролей пользователя`;
}
return `${value.length} user roles`;
}
}
Code lesson (call built-in and custom pipes)
<button (click)="getUser()">{{title}}</button>
<p>{{1+1}}</p>
<p>{{getString()}}</p>
<p>{{user?.login | uppercase}}</p>
<p>{{user?.roles | rolesCount : 'rus' : 'RUS'}}</p>
<p>{{today | date}}</p>
0 Comments