Передача параметров в кастомных канал в Angular

Можно передавать параметры в созданные кастомные каналы.

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

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

@Pipe({
	name: 'join'
})
export class JoinPipe implements PipeTransform {
	transform(array: string[], start?: any, end?: any): any {
		let result = array;
		if (start !== undefined) {
			if (end !== undefined) {
				result = array.slice(start, end);
			}
			else {
				result = array.slice(start, result.length);
			}
		}
		return result.join(', ');
	}
}

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

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { JoinPipe } from './join.pipe';

@NgModule({
declarations: [
	AppComponent,
	JoinPipe
],
imports: [
	BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Далее в классе компонента зададим массив имен:

export class AppComponent {
	users: string[] = ['john', 'jane', 'alex', 'kate', 'nick'];
}

В темплейте пропишем вывод имен из массива без форматирования и с тремя его вариантами:

<div>{{ users }}</div>
<div>{{ users | join }}</div>
<div>{{ users | join:1 }}</div>
<div>{{ users | join:1:2 }}</div>