В angular для скрытия и отображения элементов HTML мы можем использовать структурную директиву ngIf.

Сценарий

Давайте рассмотрим одну кнопку и метку с абзацем в HTML.

Случай 1: по умолчанию мы должны отображать метку абзаца и кнопку с меткой «Скрыть».

Случай 2: когда пользователь нажимает кнопку «Скрыть», нам нужно скрыть абзац, а кнопка «S как» должна отображаются, скрывая кнопку «Скрыть».

Случай 3. Теперь, когда пользователь нажимает кнопку «Показать», нам нужно отобразить «подпись абзаца» и « Кнопка Скрыть должна появиться при удалении кнопки Показать.

Решение

Для обработки вышеуказанного сценария мы можем использовать структурную директиву ngIf.

Чтобы решить описанный выше сценарий, давайте создадим новый компонент в нашем угловом проекте. (Предполагается, что вы уже создали проект angular в своей локальной системе.)

Компонент приложения по умолчанию

Предположим, что у вас уже есть проект angular по умолчанию в вашем локальном. Я использую компонент приложения по умолчанию, чтобы объяснить сценарий.

app.component.ts
app.component.html
app.component.css

Теперь давайте реализуем нашу логику HTML и Typescript ниже.

Машинопись компонентов

import { Component } from "@angular/core";
@Component({
 selector: "my-app",
 templateUrl: "./app.component.html",
 styleUrls: ["./app.component.css"]
})
export class AppComponent {
 showStatus = false;
 label = 'Paragraph Label';
}

Из приведенного выше фрагмента кода мы создали две переменные

showStatus: переменная, которая решает, отображать абзац или нет, по умолчанию значение showStatus равно false (в соответствии с случаем 1 выше)

label: метка, которую необходимо показать или скрыть на основе значения showStatus.

Компонент HTML

<button (click)="showStatus = !showStatus">
   {{showStatus ? 'Hide' : 'Show'}}
</button>
<p *ngIf="showStatus">{{label}}</p>

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

Действия

Есть кнопка, у которой есть обработчик кликов, обработчик обновит значение showStatus с true-false или false-true.

  1. Поскольку мы используем тернарный оператор вместе с интерполяцией для рендеринга метки кнопки. Название кнопки всегда зависит от значения showStatus. Когда значение showStatus равно true, метка кнопки отображается как «Скрыть», когда значение showStatus равно false, метка кнопки отображается как «Показать».

2. Существует тег абзаца, в котором была использована структурная директива * ngIf, который присваивается переменной showStatus . * ng Если всегда ожидает логическое значение, то есть истина или ложь.

3. Если значение showStatus равно true, элемент отображается, а когда значение showStatus равно false элемент исчезает.

Заключение

  1. Когда мы хотим обработать HTML контент на основе условий, мы используем * ngIf.
  2. * ngIf ожидает логического значения: true или false.
  3. Если значение равно true, элемент будет отображаться в DOM, но если значение равно false элемент будет полностью удален из DOM.
  4. Это всегда добавляет и удаляет элемент из дерева DOM.
  5. Мы можем использовать * ngIf по-другому, используя привязку свойств, т.е. [ngIf] - этот формат можно использовать только для тега ‹ng-template› для angular.
  6. Иногда это может повлиять на рендеринг HTML и может нарушить пользовательский интерфейс, поскольку элемент будет удален и добавлен, а также может вызвать колебания на веб-странице. Чтобы избежать этого, мы можем использовать свойство HTML hidden .