Frontender Libs - обзор библиотек JS / CSS

Отображение элементов в Angular

NgSwitchCase - это директива, которая используется в Angular для отображения разных элементов в зависимости от значения переменной.

Синтаксис:

<div [ngSwitch]="variable">
  <ng-container *ngSwitchCase="case1">
    </ng-container>
  <ng-container *ngSwitchCase="case2">
    </ng-container>
  <ng-container *ngSwitchDefault>
    </ng-container>
</div>

В этом примере:
[ngSwitch] - директива, которая связывает выражение variable с директивой.
ngSwitchCase - директива, которая определяет case-выражения.
ng-container - используется для определения шаблона для каждого case-выражения.
ngSwitchDefault - директива, которая определяет шаблон по умолчанию.

Пример:

<div [ngSwitch]="user.role">
  <ng-container *ngSwitchCase="'admin'">
    <h1>Администратор</h1>
  </ng-container>
  <ng-container *ngSwitchCase="'user'">
    <h1>Пользователь</h1>
  </ng-container>
  <ng-container *ngSwitchDefault>
    <h1>Неизвестная роль</h1>
  </ng-container>
</div>

👉 @sWebDev

👍6

www.tgoop.com/sWebDev/2830

1.64K viewsApr 22, 2024 at 07:43

Отображение элементов в Angular

NgSwitchCase - это директива, которая используется в Angular для отображения разных элементов в зависимости от значения переменной.

Синтаксис:

<div [ngSwitch]="variable">
  <ng-container *ngSwitchCase="case1">
    </ng-container>
  <ng-container *ngSwitchCase="case2">
    </ng-container>
  <ng-container *ngSwitchDefault>
    </ng-container>
</div>

<div [ngSwitch]="user.role">
  <ng-container *ngSwitchCase="'admin'">
    <h1>Администратор</h1>
  </ng-container>
  <ng-container *ngSwitchCase="'user'">
    <h1>Пользователь</h1>
  </ng-container>
  <ng-container *ngSwitchDefault>
    <h1>Неизвестная роль</h1>
  </ng-container>
</div>

BY Frontender Libs - обзор библиотек JS / CSS