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>