Pure и impure каналы в Angular

Все каналы в Angular бывают двух типов: pure и impure. Pure каналы не допускают внесения изменений. Они принимают изменения в значениях типов String, Number, Boolean, Symbol. А вот в объектах типов Date, Array, Function, Object изменения происходят, только когда меняется сама ссылка на объект. Если, например, мы добавили элемент к массиву в классе компонента, то при форматировании он останется исходным. Изменения будут отображаться, если по-новому перезаписать массив. По умолчанию все каналы относятся к типу pure.

Impure каналы допускают изменения в объектах всех типов. Однако при этом снижается производительность работы фреймворка, т.к. он затрачивает больше ресурсов на форматирование объектов.

Давайте рассмотрим наш канал JoinPipe. Он работает с массивами и по умолчанию не может отслеживать в них изменения. Давайте сделаем его impure. Для этого в декоратор @Pipe добавим свойство pure в значении false:

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

@Pipe({
	name: 'join',
	pure: false
})
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(', ');
	}
}

Теперь в файле темплейта сделаем инпут для ввода нового имени в массив и привяжем к нему переменную #user. По клику на кнопку значение данной переменной будет добавляться в общий массив с именами. Далее каждое отформатированное имя отобразиться под кнопкой:

<input #user name="user">
<button class="btn" (click)="users.push(user.value)">Add</button>
<p>{{ users | join }}</p>

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

Измените код из предыдущего примера так, чтобы названия всех городов выводились в абзацах в верхнем регистре.