رندر شرطی (Conditional)

رندر شرطی (Conditional Rendering) یعنی نمایش بخش ها بر اساس وضعیت. بنابراین وقتی شرط عوض می شود، نما هم تغییر می کند؛ مثل چراغ راهنمایی که سبز یا قرمز می شود.

اصول رندر شرطی

از @if ، @else if ، @else برای منطق شرطی استفاده کن. از @switch برای انتخاب یک نما بین چند حالت کمک بگیر. همچنین اگر فقط می خواهی پنهان کنی، [hidden] یا CSS کافی است.

@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>

مشاهده در ادیتور

نمونه پایه با @if

سیگنال (Signal) یعنی متغیر واکنشی. مقدارش را می خوانی یا تغییر می دهی و نما به روز می شود؛ مثل نمره ای که در کارنامه تغییر می کند.

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);

مشاهده در ادیتور

انتخاب نما با @switch

با @switch روی یک مقدار سوییچ کن و فقط یک حالت را نشان بده؛ مثل انتخاب مرحله بازی از منو.

@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>
  }
}

مشاهده در ادیتور

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);

مشاهده در ادیتور

چند حالت با @if / @else if

برای چند وضعیت خوانا، زنجیره @if ، @else if ، @else بساز. وضعیت ها را از کامپوننت هدایت کن.

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

مشاهده در ادیتور

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(): void {
    this.loading.set(true);
    this.error.set(false);
    clearTimeout(this._timer);
    this._timer = setTimeout((): void => {
      this.loading.set(false);
    }, 800);
  }
  showError(): void {
    this.error.set(true);
    this.loading.set(false);
  }
  reset(): void {
    this.loading.set(false);
    this.error.set(false);
  }
}

bootstrapApplication(App);

مشاهده در ادیتور