Що робить директива ngSwitch?

AngularJunior~1 хв читання

Директива ngSwitch в Angular, це структурна директива, яка дозволяє відображати один із кількох варіантів елементів залежно від значення виразу.

Принцип роботи:

На батьківському елементі використовується [ngSwitch]="вираз".
Усередині розташовуються дочірні елементи з *ngSwitchCase="значення" для конкретних варіантів.
Можна вказати *ngSwitchDefault для випадку, коли жоден case не збігається.

Приклад:

html

<div [ngSwitch]="color">
  <p *ngSwitchCase="'red'">Обрано червоний</p>
  <p *ngSwitchCase="'blue'">Обрано синій</p>
  <p *ngSwitchDefault>Колір не обрано</p>
</div>

Якщо color = 'blue', Angular відрендерить лише <p>Обрано синій</p>.

Висновок: ngSwitch керує вибором одного з кількох елементів у DOM на основі значення виразу.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.