Dyrektywy warunkowe w Angularze – @if i *ngIf

01

Czym jest @if?

W TypeScript używasz if żeby wykonać kod tylko gdy spełniony jest jakiś warunek. W szablonie Angular działa dokładnie ta sama idea – @if wyświetla fragment HTML tylko wtedy, gdy warunek jest prawdziwy.

TypeScript – if w logice

// Wykonuje kod gdy warunek prawdziwy
if (wiek >= 18) {
  pokazTresc();
} else {
  pokazBlad();
}

Angular – @if w szablonie

<!-- Wyświetla HTML gdy warunek prawdziwy -->
@if (wiek >= 18) {
  <p>Witaj, pełnoletni użytkowniku!</p>
} @else {
  <p>Musisz mieć 18 lat.</p>
}

Kluczowa różnica: if w TypeScript decyduje co zrobić, a @if w szablonie decyduje co wyświetlić. Gdy warunek nie jest spełniony, Angular w ogóle nie tworzy elementu w HTML – znika on kompletnie ze strony.

@if usuwa element – nie tylko ukrywa

To ważna różnica w stosunku do CSS display: none. display: none ukrywa element, ale wciąż istnieje on w HTML. @if gdy ma wartość false całkowicie usuwa element z DOM – jakby go nigdy nie było. Ma to znaczenie dla wydajności przy dużych listach i formularzach.

02

Podstawowa składnia @if

Składnia @if jest prosta: słowo kluczowe, warunek w nawiasach okrągłych i blok HTML w klamrach. Warunek to dowolne wyrażenie TypeScript dające wartość true lub false.

ts/app.component.ts TS

export class AppComponent {
  czyZalogowany = true;
  imie          = 'Piotr';
  wiek          = 20;
  czyAdmin      = false;
}

html/app.component.html HTML

<!-- Warunek: zmienna boolean -->
@if (czyZalogowany) {
  <p class="alert alert-success">Jesteś zalogowany jako {{ imie }}.</p>
}

<!-- Warunek: porównanie liczb -->
@if (wiek >= 18) {
  <p>Masz dostęp do pełnej wersji.</p>
}

<!-- Warunek: negacja -->
@if (!czyAdmin) {
  <p class="text-muted">Nie masz uprawnień administratora.</p>
}

W warunku możesz użyć wszystkiego co znasz z TypeScript

Operatory porównania: ==, !=, ===, >, <, >=, <=. Operatory logiczne: && (i), || (lub), ! (nie). Wywołania metod zwracające boolean. Każde wyrażenie dające true lub false.

03

@else – gałąź alternatywna

Gdy warunek nie jest spełniony, możemy wyświetlić coś innego – za pomocą bloku @else. Działa identycznie jak else w TypeScript.

ts/app.component.ts TS

export class AppComponent {
  czyZalogowany = false;
  imie = 'Anna';

  przelaczLogin(): void {
    this.czyZalogowany = !this.czyZalogowany;
  }
}

html/app.component.html HTML

@if (czyZalogowany) {

  <!-- Ten blok widoczny gdy czyZalogowany = true -->
  <div class="alert alert-success">
    <h4>Witaj, {{ imie }}! 👋</h4>
    <p>Jesteś zalogowany.</p>
    <button class="btn btn-outline-danger" (click)="przelaczLogin()">
      Wyloguj
    </button>
  </div>

} @else {

  <!-- Ten blok widoczny gdy czyZalogowany = false -->
  <div class="alert alert-warning">
    <h4>Nie jesteś zalogowany.</h4>
    <p>Zaloguj się, aby zobaczyć zawartość.</p>
    <button class="btn btn-primary" (click)="przelaczLogin()">
      Zaloguj
    </button>
  </div>

}

Kliknięcie przycisku wywołuje przelaczLogin(), która odwraca wartość czyZalogowany. Angular automatycznie reaguje na tę zmianę i zamienia wyświetlany blok HTML – bez przeładowania strony.

W bloku @if możesz umieścić wiele elementów

Między klamrami { } możesz wstawić dowolną liczbę elementów HTML. Nie musisz owijać ich w dodatkowy <div> – Angular renderuje wszystkie elementy z bloku bez żadnego opakowania.

04

@else if – wiele warunków

Gdy mamy więcej niż dwie możliwości, łączymy @else if – dokładnie tak samo jak w TypeScript.

ts/app.component.ts TS

export class AppComponent {
  punkty: number = 72;
}

html/app.component.html HTML

<div class="card p-3">
  <h4>Wynik testu: {{ punkty }} / 100</h4>

  @if (punkty >= 90) {
    <span class="badge bg-success fs-6">Celujący – brawo!</span>

  } @else if (punkty >= 75) {
    <span class="badge bg-primary fs-6">Bardzo dobry</span>

  } @else if (punkty >= 50) {
    <span class="badge bg-warning fs-6">Dostateczny</span>

  } @else {
    <span class="badge bg-danger fs-6">Niedostateczny – popraw!</span>
  }

</div>

<!-- Dla punkty = 72 wyświetli się: "Dostateczny" -->

Angular sprawdza warunki po kolei

Tak jak w TypeScript, Angular sprawdza warunki od góry i zatrzymuje się przy pierwszym, który jest true. Dlatego kolejność @else if ma znaczenie – bardziej szczegółowe warunki (np. >= 90) piszemy wyżej niż ogólne (>= 50).

05

Warunki złożone – && i ||

W warunku @if możesz łączyć wiele warunków operatorami logicznymi – tak samo jak w TypeScript.

ts/app.component.ts TS

export class AppComponent {
  czyZalogowany = true;
  czyAdmin      = false;
  wiek          = 17;
  imie          = 'Kacper';
}

html/app.component.html HTML

<!-- && – oba warunki muszą być prawdziwe -->
@if (czyZalogowany && czyAdmin) {
  <p>Panel administracyjny</p>
}

<!-- || – wystarczy jeden prawdziwy warunek -->
@if (czyZalogowany || wiek >= 18) {
  <p>Masz dostęp do treści.</p>
}

<!-- Warunek na string – sprawdzamy czy nie jest pusty -->
@if (imie.length > 0) {
  <p>Cześć, {{ imie }}!</p>
} @else {
  <p>Podaj swoje imię.</p>
}

<!-- Skrócony warunek na string – truthy/falsy -->
@if (imie) {
  <p>Cześć, {{ imie }}!</p>
}

Truthy i Falsy – co jest „prawdziwe” w JavaScripcie?

W JavaScript i TypeScript nie tylko true/false są traktowane jako warunki. Puste wartości są automatycznie traktowane jako false – nazywamy je falsy: false, 0, '' (pusty string), null, undefined, NaN. Wszystko inne jest truthy (traktowane jako true). Dlatego @if (imie) działa – pusty string jest falsy, niepusty jest truthy.

06

Stary sposób – *ngIf

Przed Angular 17 nie istniała składnia @if. Warunkowe wyświetlanie realizowało się przez dyrektywę strukturalną *ngIf. Znaj ją – spotkasz ją w starszym kodzie i na Stack Overflow.

🕰️ Stary sposób – *ngIf

<!-- Wymagało importu NgIf w komponencie -->
<p *ngIf="czyZalogowany">
  Witaj!
</p>

<!-- @else było bardziej skomplikowane -->
<p *ngIf="czyZalogowany; else niezalogowany">
  Witaj!
</p>
<ng-template #niezalogowany>
  <p>Zaloguj się.</p>
</ng-template>

✅ Nowy sposób – @if (Angular 21)

<!-- Nie wymaga żadnych importów -->
@if (czyZalogowany) {
  <p>Witaj!</p>
} @else {
  <p>Zaloguj się.</p>
}

	*ngIf (stary)	@if (nowy)
Dostępny od	Angular 2	Angular 17+
Import wymagany?	Tak – `NgIf` lub `CommonModule`	Nie – działa od razu
Czytelność	Średnia – atrybut w znaczniku	Wysoka – osobny blok jak w TS
Gałąź @else	Przez `ng-template` – nieczytelne	Naturalnie za blokiem `}`
Zalecane?	❌ W nowych projektach – nie	✅ Tak – to obecny standard

Nie mieszaj *ngIf z @if w jednym projekcie

Oba działają, ale mieszanie ich w jednym projekcie utrudnia czytanie kodu. Wybierz jeden styl i trzymaj się go. W nowych projektach Angular 21 używamy wyłącznie @if.

07

Częste błędy

❌ Błąd 1 – Brak klamr

❌ Źle – brak { }

<!-- To nie zadziała – brak klamr -->
@if (czyZalogowany)
  <p>Witaj!</p>

✅ Dobrze – klamry obowiązkowe

@if (czyZalogowany) {
  <p>Witaj!</p>
}

❌ Błąd 2 – @else bez zamknięcia poprzedniego bloku

❌ Źle

@if (warunek) {
  <p>Tak</p>
// brak zamknięcia }  !
@else {
  <p>Nie</p>
}

✅ Dobrze – } @else bezpośrednio

@if (warunek) {
  <p>Tak</p>
} @else {
  <p>Nie</p>
}

❌ Błąd 3 – Przypisanie zamiast porównania

❌ Źle – jedno = to przypisanie

<!-- = to przypisanie, nie porównanie! -->
@if (wiek = 18) { ... }

✅ Dobrze – == lub ===

<!-- === porównuje wartość i typ -->
@if (wiek === 18) { ... }

<!-- >= dla zakresu -->
@if (wiek >= 18) { ... }

✏️

Zadanie – panel statusu ucznia

Stwórz aplikację wyświetlającą panel statusu ucznia. Zdefiniuj w klasie zmienne i użyj @if, @else if i @else do wyświetlania różnych komunikatów.

Zdefiniuj w klasie:

imie – imię ucznia (string)
srednia – średnia ocen (number, np. 3.8)
czyObecny – czy uczeń jest obecny (boolean)
liczbaNieobecnosci – liczba nieobecności (number)

W szablonie wyświetl:

Komunikat obecności: jeśli czyObecny – zielony alert „Uczeń obecny”, w przeciwnym razie – czerwony alert „Uczeń nieobecny”
Ocenę słowną ze średniej: celujący (≥5.0), bardzo dobry (≥4.5), dobry (≥3.5), dostateczny (≥2.75), niedostateczny (pozostałe) – każda w odpowiednim kolorze Bootstrap badge
Ostrzeżenie jeśli liczba nieobecności przekracza 10 i uczeń jest nieobecny (warunek złożony z &&)

Zmień kilka razy wartości zmiennych w klasie i sprawdź czy szablon reaguje poprawnie.

Następny temat

W następnym materiale poznamy @for – pętlę szablonową, która pozwala wyświetlić listę elementów z tablicy bez ręcznego powielania kodu HTML.

Dyrektywa @if – warunkowe wyświetlanie

Czym jest @if?

TypeScript – if w logice

Angular – @if w szablonie

Podstawowa składnia @if

@else – gałąź alternatywna

@else if – wiele warunków

Warunki złożone – && i ||

Stary sposób – *ngIf

🕰️ Stary sposób – *ngIf

✅ Nowy sposób – @if (Angular 21)

Częste błędy

❌ Błąd 1 – Brak klamr

❌ Źle – brak { }

✅ Dobrze – klamry obowiązkowe

❌ Błąd 2 – @else bez zamknięcia poprzedniego bloku

❌ Źle

✅ Dobrze – } @else bezpośrednio

❌ Błąd 3 – Przypisanie zamiast porównania

❌ Źle – jedno = to przypisanie

✅ Dobrze – == lub ===

Zadanie – panel statusu ucznia