Dyrektywa ngIf

Dyrektywa NgIf jest jednym z podstawowych narzędzi w Angularze, służącym do warunkowego wyświetlania elementów w interfejsie użytkownika. Pozwala ona na dodanie lub usunięcie elementu z DOM w oparciu o wartość logiczną (true lub false) wyrażenia. Jest to niezwykle przydatne w tworzeniu interaktywnych aplikacji, gdzie część treści powinna być widoczna tylko w określonych warunkach.

Podstawowe użycie NgIf

Załóżmy, że mamy w aplikacji przycisk, który po kliknięciu ma wyświetlać dodatkowe informacje. Użycie NgIf pozwala na kontrolę widoczności tych informacji w zależności od stanu aplikacji.

import { Component } from '@angular/core';
import {CommonModule} from "@angular/common";

@Component({
  selector: 'app-my-component',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './my-component.component.html',
  styleUrl: './my-component.component.css'
})
export class MyComponentComponent {
  showInfo = false;

  toggleInfo() {
    this.showInfo = !this.showInfo;
  }
}

W tym przykładzie, kliknięcie przycisku zmienia wartość zmiennej showInfo. Jeśli showInfo jest true, blok div zostanie wyświetlony; jeśli false, blok div zostanie usunięty z DOM.

<button (click)="toggleInfo()">Pokaż/ukryj informacje</button>
<div *ngIf="showInfo">
  Tu będą dodatkowe informacje dostępne po kliknięciu przycisku.
</div>

NgIf z Else

Angular umożliwia także zdefiniowanie alternatywnego widoku, który ma być wyświetlany, gdy warunek NgIf nie jest spełniony, za pomocą lokalnej zmiennej szablonu i dyrektywy else.

<button (click)="toggleInfo()">Pokaż/ukryj informacje</button>
<div *ngIf="showInfo; else noInfo">
  Informacje dostępne.
</div>
<ng-template #noInfo>
  Informacje ukryte.
</ng-template>

W tym przypadku, gdy showInfo jest false, zamiast ukrywać treść, Angular wyświetli treść zdefiniowaną w <ng-template #noInfo>.

Wykorzystanie NgIf z operatorami logicznymi

NgIf można używać z różnymi operatorami logicznymi w wyrażeniach, aby tworzyć bardziej złożone warunki. Na przykład:

<div *ngIf="user.isLoggedIn && user.hasAccess">
  Ta treść jest widoczna dla zalogowanych użytkowników z dostępem.
</div>