В чем разница между ngIf и свойством hidden?

В Angular существует несколько способов управлять отображением элементов на странице. Два популярных метода — это директива ngIf и свойство hidden. В этой статье мы рассмотрим главные различия между ними, чтобы помочь новичкам лучше понять, когда и как использовать каждый из этих подходов.

1. Что такое ngIf?

ngIf — это структурная директива Angular, которая позволяет добавлять или удалять элементы из DOM в зависимости от определенного условия. Когда условие истинно, элемент (или группа элементов) добавляется в DOM; когда ложь — он удаляется.

Пример использования ngIf:

<div *ngIf="isVisible">Этот текст виден, если isVisible равно true!</div>
<button (click)="toggleVisibility()">Переключить видимость</button>

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html'
})
export class ExampleComponent {
  isVisible: boolean = false;

  toggleVisibility() {
    this.isVisible = !this.isVisible;
  }
}

В этом примере, когда пользователь нажимает кнопку, переменная isVisible переключается между true и false, что добавляет или удаляет текст из DOM.

2. Что такое свойство hidden?

Свойство hidden — это стандартное HTML-свойство, которое позволяет скрыть элементы, не удаляя их из DOM. Когда элемент имеет свойство hidden, он остается на странице, но не отображается пользователю.

Пример использования свойства hidden:

<div [hidden]="!isVisible">Этот текст всегда в DOM, но скрыт, если isVisible равно false.</div>
<button (click)="toggleVisibility()">Переключить видимость</button>

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html'
})
export class ExampleComponent {
  isVisible: boolean = false;

  toggleVisibility() {
    this.isVisible = !this.isVisible;
  }
}

В этом примере, аналогично предыдущему, текст скрыт или показан в зависимости от значения isVisible, но остаётся в DOM даже когда скрыт.

3. Сравнение

4. Когда использовать?

• Используйте ngIf, когда вы хотите полностью удалить элемент из DOM, чтобы сэкономить ресурсы или избежать нежелательного поведения.
• Используйте hidden, когда вам нужно оставить элемент в DOM (например, сохранить состояние формы, элементы, которые могут быть быстро показаны без их повторного создания).

Надеюсь, это поможет вам лучше понять различия между ngIf и свойством hidden в Angular!