Angular. Пайпы

Главная » Видеоуроки » JavaScript » Angular. Пайпы

Angular пайпы — это аналоги AngularJS фильтров. Они выполняют трансформацию даных перед выводом в шаблоне компонента.

В Angular есть стандартные пайпы (date, uppercase, lowercase, currency, decimal, percent). Также разработчик может создавать свои пайпы.  Пайп — это класс, реализующий метод transform интерфейса PipeTransform. 

Код урока (пайп)

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`;
  }

}

Код урока (вызов стандартных и пользовательских пайпов)

<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 Комментариев

Оставить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *


Срок проверки reCAPTCHA истек. Перезагрузите страницу.

Pin It on Pinterest

Share This