Фильтрация списка дел

Теперь перейдем к добавлению функционала позволяющего пользователям фильтровать свои задачи, чтобы они могли просматривать активные, завершенные или все элементы.

Необходимые условия: Понимание основ HTML, CSS, и JavaScript, знание терминала/командной строки
Цель: Добавить функционал фильтрации к вашему приложению.

Код фильтрации

Фильтрация элементов основана на свойстве filter, которое вы ранее добавили в app.component.ts:

js
filter: 'all' | 'active' | 'done' = 'all';

Значение фильтра по умолчанию — all, но так же может быть active или done.

Добавление элементов управления фильтром

В app.component.html, добавьте следующий html перед кнопкой Add но над разделом, в котором перечислены элементы. В следующем снипете существующие секции в вашем HTML отмечены комментарии поэтому вы точно можете видеть где разместить кнопки.

html
<!-- <button class="btn-primary" (click)="addItem(newItem.value)">Add</button>
 -->

<!-- Кнопки, которые меняют отображение элементов на все, только активные или только выполненные -->
<div class="btn-wrapper">
  <button
    class="btn btn-menu"
    [class.active]="filter == 'all'"
    (click)="filter = 'all'">
    All
  </button>

  <button
    class="btn btn-menu"
    [class.active]="filter == 'active'"
    (click)="filter = 'active'">
    To Do
  </button>

  <button
    class="btn btn-menu"
    [class.active]="filter == 'done'"
    (click)="filter = 'done'">
    Done
  </button>
</div>

<!-- <h2>{{items.length}} item(s)</h2>
        <ul>... -->

Нажатие на кнопки изменяет значение filter, что определяет отображаемые элементы items, а так же стили, применяемые к активной кнопке.

  • Если пользователь нажимает кнопку All, то отображаются все элементы.
  • Если пользователь нажимает кнопку To do, только элементы со значением свойства done равным false отображаются.
  • Если пользователь нажимает кнопку Done, только элементы со значением свойства done равным true отображаются.

Привязка атрибута class, которая происходит с использованием квадратных скобок [], управляет цветом текста кнопок. Привязка [class.active], применяет класс active когда значение filter совпадает с выражением. Например, когда пользователь нажимает кнопку Done, которая устанавливает значение filter в done, выражение привязки класса filter == 'done' возвращает true. Когда значение filter равно done, Angular применяет класс active к кнопке Done, что делает цвет текста зеленым. Как только пользователь нажимает одну из других кнопок, значение filter больше не done, поэтому цвет текста больше не зеленый.

Резюме

Это было быстро! Поскольку у вас уже был частично реализован код фильтрации в app.component.ts, все что вам нужно было сделать — это отредактировать шаблон, чтобы добавить элементы управления для фильтрации. В следующей и последней статье рассматривается, как создать полностью готовое Angular-приложение и предоставляются дополнительные ресурсы для продолжения учебного пути.

В это модуле