Angular boshqaruv oqimi (control flow)

Boshqaruv oqimi direktivalari (@if , @for , @switch ) shablonlarda shoxchalar, ro‘yxatlar va holatlarni ko‘rsatadi va yangi kod uchun eski *ngIf/*ngFor/[ngSwitch] o‘rnini bosadi.

Boshqaruv oqimi asoslari

• @if: ixtiyoriy else if/else bilan shartli bloklar.
• @for : Barqaror identifikatsiya uchun track va bo‘sh holatlar uchun ixtiyoriy @empty bilan sikllar.
• @switch: Mos keladigan holatni tanlaydi va ko‘rsatadi.
• Angular 17+ da yangi kod uchun afzal; eski *ngIf/*ngFor/[ngSwitch] qo‘llab-quvvatlanadi.

@if (score > 90) { <p>A</p> } @else if (score > 75) { <p>B</p> } @else { <p>C</p> }

<ul>
  @for (it of items; track it.id) { <li>{{ it.label }}</li> } @empty { <li>No items</li> }
</ul>

@switch (status) {
  @case ('pending') { <p>Pending</p> }
  @case ('done') { <p>Done</p> }
  @default { <p>Unknown</p> }
}

Kod tushuntirildi

• @if ... @else: Shart asosida turli bloklarni ko‘rsatish uchun filiallar.
• @for (...; track ...) : DOMdan qayta foydalanish uchun barqaror identifikatorlarni saqlash uchun track takrorlaydi va foydalanadi.
• @switch/@case/@default: Mos keladigan holatni tanlaydi va ko‘rsatadi.

Oqimni boshqarish asoslari

Kontentni @if ...; else bilan almashtiring.

@for bilan takrorlang va barqaror DOM yangilanishlari uchun track ifodasini qo‘shing.

@if (show) { <p>Visible</p> } @else { <p>Hidden</p> }

@for (item of items; track item) { <li>{{ item }}</li> }

Misol

Kontentni @if bilan almashtiring va track ifodasi yordamida @for ro‘yxatini ko‘rsating:

import { bootstrapApplication } from '@angular/platform-browser';
import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <h3>Control Flow</h3>
    <button (click)="show.set(!show())">Toggle</button>
    <button (click)="items.set([])">Clear</button>
    <button (click)="reset()">Reset</button>

    @if (show()) {
      <p>Visible</p>
    } @else {
      <p>Hidden</p>
    }

    <ul>
      @for (item of items(); track item) {
        <li>{{ item }}</li>
      } @empty {
        <li>No items</li>
      }
    </ul>
  `
})
export class App {
  show = signal(true);
  items = signal(['One','Two','Three']);
  reset() { this.items.set(['One','Two','Three']); }
}

bootstrapApplication(App);

<app-root></app-root>

Misol tushuntirildi

• @if ... @else: show() signali asosida paragrafni almashtiradi.
• @for ... track item : items() signalidan ro‘yxatni ko‘rsatadi va track bilan DOMni saqlaydi.
• @empty: Ro‘yxat bo‘sh bo‘lganda zaxirani ko‘rsatadi.
• Signallar: tugmalar yangilanadi show va items , ular ko‘rinishni qayta ko‘rsatadi.