Создание кастомных каналов в Angular

Можно создавать свои каналы. Попробуем на практике. Давайте сделаем канал для форматирования имени пользователя. Изначально имя будет задано в нижнем регистре, а мы зададим написание его первого символа с большой буквы. Назовем наш новый кананал FormatPipe.

Начнем с того, что в папке test/src/app создадим файл format.pipe.ts. Импортируем в него декоратор @Pipe и интерфейс PipeTransform. В декораторе зададим имя нашему каналу. А с помощью PipeTransform зададим метод transform, который примет строку и отформатирует ее:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
	name: 'format'
})
export class FormatPipe implements PipeTransform {
	transform(variable: string, args?: any): string {
		return variable.slice(0, 1).toUpperCase() + variable.slice(1);
	}
}

Для того, чтобы наш новый канал подключился к работе фреймворка, нужно указать его в модуле:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { FormatPipe } from './format.pipe'; // тут

@NgModule({
declarations: [
	AppComponent,
	FormatPipe // и тут
],
imports: [
	BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Далее в главном компоненте зададим имя пользователя:

export class AppComponent {
	name: string = 'john';
}

Выведем имя пользователя в отформатированном виде:

<div>
	имя: {{ name | format }}
</div>

В своем проекте реализуйте канал для вывода каждого слова в предложении с большой буквы.