Часто требуется показать элемент при нажатии кнопки или ссылки и снова скрыть его при нажатии.
Проще говоря, переключать отображение элементов при каждом нажатии.

Практическим примером этого сценария является кнопка уведомления на Facebook.
При нажатии появляется список уведомлений, а при повторном нажатии список исчезает.
В этом посте будет объяснено несколько методов, с помощью которых это можно сделать в angular.

1. Использование скрытого свойства

Добавьте собственное свойство HTML hidden к элементу, который необходимо переключить. Когда значение свойства hidden равно true, элемент не отображается.
Точно так же, когда оно равно false, элемент отображается.

Привяжите свойство hidden к свойству компонента типа boolean, чтобы оно могло иметь только значение true или false.
Пример
Ниже приведен HTML-шаблон компонента, содержащего div и button. Когда эта кнопка нажата, div переключает свое отображение.

<html>
 <title>Element toggle in angular</title>
 <body>
 <div [hidden] = “isShow”>This is a div which toggles.</div>
 <button (click) = toggleDisplay()>Toggle</button>
 </body>
</html>

Ниже приведен соответствующий класс компонента, который содержит свойство isShow, управляющее отображением div, и функцию toggleDisplay, которая обрабатывает событие нажатия кнопки.

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})
export class AppComponent {
  isShow = false;
 
  toggleDisplay() {
    this.isShow = !this.isShow;
  }
}

Эта функция изменяет значение свойства isShow при нажатии кнопки.
Изначально для свойства isShow установлено значение false, что означает, что div отображается.
При нажатии на button для свойства isShow устанавливается значение false, а div не отображается.

2. директива ngIf

Директива ngIf применяется к элементу и связана со свойством компонента или условием.
Если условие оценивается как true, элемент отображается иначе.
Вышеприведенный пример можно изменить, чтобы использовать ngIf, как показано ниже.

<html>
   <title>Element toggle in angular</title>
   <body>
      <div *ngIf = “!isShow”>This is a div which toggles.</div>
      <button (click) = toggleDisplay()>Toggle</button>
   </body>
</html>

Класс компонента для этого подхода такой же, как и для более раннего метода, поскольку логика не меняется.
Обратите внимание, что условием для ngIf является !isShow, чтобы элемент div отображался при загрузке страницы.
Это связано с тем, что мы инициализировали isShow значением false в классе компонента.

Разница между ngIf и скрытым свойством

hidden делает элемент невидимым, пока он присутствует на странице. Он добавляет тот же эффект, что и применение свойства CSS display: none;.

Если к элементу применяется директива ngIf и его условие оценивается как false, элемент удаляется со страницы, вы не увидите его в исходном коде.

Надеюсь, статья стоила потраченного времени.
Оригинал статьи здесь.
Вы также можете подписаться на мой канал YouTube, нажав здесь.