# Создание кастомных каналов в 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>`

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

↑