Angular shartli render qilish

Shartli render qilish shablon qismlarini holat (state) asosida ko‘rsatadi yoki yashiradi.

Shartli render qilish asoslari

Shartli mantiq uchun @if / @else if / @else dan foydalaning.
Ko‘p ko‘rinishdan bittasini tanlash uchun @switch dan foydalaning.
Signallar: Signallardan shartlarni boshqaring va ularni shablonlarda sig() yordamida o‘qing.
Yashirish va olib tashlash: @if DOMdan olib tashlaydi; yo‘q qilmasdan yashirish uchun [hidden] yoki CSS dan foydalaning.
Legacy: *ngIf va [ngSwitch] qo‘llab-quvvatlanadi, lekin bu yerda ko‘rsatilmaydi.

@if (condition) { <p>Shown</p> } @else { <p>Hidden</p> }

@switch (value) {
  @case ('x') { <p>X</p> }
  @default { <p>Other</p> }
}

<div [hidden]="!isVisible">Hidden but in DOM</div>

Eslatma: @if/@switch/@for uchun boshqaruv oqimi (Control Flow), markup/interpolyatsiya uchun shablonlar (Templates), kiritishni qayta ishlash uchun hodisalar (Events) va to‘plamlarni render qilish uchun ro‘yxatlar (Lists) bo‘limlariga qarang.

Asosiy shartli render qilish

@if / @else bilan kontentni render qilish.
Boolean qiymatlarni signallar orqali boshqaring; shablon ifodalarini sodda saqlang.

@if (show()) { <p>Now you see me!</p> } @else { <p>Now I'm hidden.</p> }

Misol

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

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <h3>Conditional Rendering</h3>
    <button (click)="show.set(!show())">Toggle</button>
    @if (show()) { <p>Now you see me!</p> } @else { <p>Now I'm hidden.</p> }
  `
})
export class App {
  show = signal(true);
}

bootstrapApplication(App);

<app-root></app-root>

Misolni ishga tushirish »

Misol tushuntirildi

@if (show()): show signalini o‘qiydi; qiymat true bo‘lganda birinchi blokni, aks holda @else blokini render qiladi.
O‘zgartirish: Tugma signal qiymatini o‘zgartirish uchun show.set(!show()) ni chaqiradi.
Shablonlardagi signallar: signallarni chaqirish orqali o‘qing (masalan, show()).

Eslatmalar:

Ifodalarni yengil saqlang: shablonlarda metodlarni chaqirishdan saqlaning; signallarni handler/servislarda yangilang.
Legacy: *ngIf bilan then/else qo‘llab-quvvatlanadi.
Aniq bo‘ling: Murakkab truthy/falsy tekshiruvlar o‘rniga aniq shartlardan (masalan, isVisible) foydalaning.

@switch

@switch yordamida bitta qiymat bo‘yicha tanlang va mos keladigan case’ni render qiling.
@default bilan har doim kutilmagan qiymatlar uchun aniq standartni taqdim eting.

@switch (status) {
  @case ('loading') { <p>Loading...</p> }
  @case ('success') { <p>Success!</p> }
  @case ('error') { <p style="color:crimson">Error!</p> }
  @default { <p>Unknown status</p> }
}

Misol

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

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <h3>Conditional Rendering with @switch</h3>
    <label>
      Status:
      <select (change)="status.set($any($event.target).value)">
        <option value="loading">loading</option>
        <option value="success">success</option>
        <option value="error">error</option>
      </select>
    </label>

    @switch (status()) {
      @case ('loading') { <p>Loading...</p> }
      @case ('success') { <p>Success!</p> }
      @case ('error') { <p style="color:crimson">Error!</p> }
      @default { <p>Unknown status</p> }
    }
  `
})
export class App {
  status = signal<'loading' | 'success' | 'error' | string>('loading');
}

bootstrapApplication(App);

<app-root></app-root>

Misolni ishga tushirish »

Misol tushuntirildi

@switch (status()): joriy status signali qiymati asosida render qilish uchun bitta case’ni tanlaydi.
@case / @default : mos keladigan @case’ni render qiladi; hech bir case mos kelmasa, @default’ga o‘tadi.
O‘zgartirish ishlov beruvchisi: select status ni status.set($any($event.target).value) orqali o‘rnatadi.

Eslatmalar:

Default muhim: kutilmagan qiymatlar uchun har doim @default case’ini taqdim eting.
Barqaror qiymatlar: moslik oldindan aniq bo‘lishi uchun switch’ni obyektlar bo‘yicha emas, oddiy primitivlar (masalan, stringlar) bo‘yicha qo‘llang.

@if bilan ko‘p holat

O‘qiladigan ko‘p holatli oqimlar uchun @if / @else if / @else dan foydalaning.
Holat o‘tishlarini komponentdan (masalan, taymerlar, bayroqlar) signallar orqali boshqaring.

@if (!loading() && !error()) {
  <p>Content loaded successfully.</p>
} @else if (loading()) {
  <p>Loading...</p>
} @else {
  <p style="color:crimson">Something went wrong.</p>
}

Misol

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

@Component({
  selector: 'app-root',
  standalone: true,
  styles: [`
    .toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  `],
  template: `
    <h3>Multi-state with @if</h3>

    <div class="toolbar">
      <button (click)="startLoading()">Start Loading</button>
      <button (click)="showError()">Set Error</button>
      <button (click)="reset()">Reset</button>
      <span style="margin-left:8px;color:#666">loading={{ loading() }} error={{ error() }}</span>
    </div>

    @if (!loading() && !error()) {
      <p>Content loaded successfully.</p>
    } @else if (loading()) {
      <p>Loading...</p>
    } @else {
      <p style="color:crimson">Something went wrong.</p>
    }
  `
})
export class App {
  loading = signal(false);
  error = signal(false);
  private _timer: any;

  startLoading() {
    this.loading.set(true);
    this.error.set(false);
    clearTimeout(this._timer);
    this._timer = setTimeout(() => {
      this.loading.set(false);
    }, 800);
  }
  showError() {
    this.error.set(true);
    this.loading.set(false);
  }
  reset() {
    this.loading.set(false);
    this.error.set(false);
  }
}

bootstrapApplication(App);

<app-root></app-root>

Misolni ishga tushirish »

Misol tushuntirildi

Ko‘p tarmoqli @if: loading() va error() signallari asosida muvaffaqiyat, yuklash yoki xato bo‘limlarini ko‘rsatadi.
startLoading(): loading ni true qiymatiga o‘rnatadi, xatoni tozalaydi, so‘ngra 800ms dan keyin loading’ni o‘chiradi (asinxron ishni simulyatsiya qiladi).
showError() / reset(): showError() error ni o‘rnatadi va loading ni tozalaydi; reset() ikkalasini ham tozalaydi.

Eslatmalar:

O‘qilishi mumkin bo‘lgan oqimlar: Ko‘p holatli UI’lar uchun @else if zanjirni afzal ko‘ring; nomli shablonlardan faqat bloklarga dinamik ravishda murojaat qilish kerak bo‘lganda foydalaning.
Miltillashdan saqlaning: holatni komponentdan boshqaring; o‘tishlar paytida UI miltillashining oldini olish uchun taymerlar va asinxron ishlarni tozalang.

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish