# 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>`

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

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

↑