Angular: условный класс с *ngClass

Другим решением будет использование [class.active].

Пример:

<ol class="breadcrumb">
    <li [class.active]="step=='step1'" (click)="step='step1'">Step1</li>
</ol>

В этом примере класс active будет применяться к элементу <li>, если переменная step равна 'step1'. Это позволяет динамически изменять состояние элемента в зависимости от значения step, обеспечивая более чистый и управляемый код.

Это нормальная структура. Для ngClass это выглядит следующим образом:

[ngClass]="{'classname' : condition}"

Таким образом, в вашем случае просто используйте это так:

<ol class="breadcrumb">
  <li [ngClass]="{'active': step === 'step1'}" (click)="step = 'step1'">Step1</li>
  <li [ngClass]="{'active': step === 'step2'}" (click)="step = 'step2'">Step2</li>
  <li [ngClass]="{'active': step === 'step3'}" (click)="step = 'step3'">Step3</li>
</ol>

Теперь класс active будет применяться к элементу списка, в зависимости от значения переменной step.

В вашем коде вы можете использовать конструкцию 'IF ELSE' для применения классов в зависимости от условия. Вот несколько примеров:

1. Встраивание условий непосредственно в класс разметки:

<p class="{{condition ? 'checkedClass' : 'uncheckedClass'}}"></p>

2. Использование директивы ngClass с тернарным оператором:

<p [ngClass]="condition ? 'checkedClass' : 'uncheckedClass'"></p>

3. Передача массива классов через ngClass, используя тернарный оператор:

<p [ngClass]="[condition ? 'checkedClass' : 'uncheckedClass']"></p>

Во всех этих примерах класс элемента <p> будет определяться в зависимости от значения переменной condition. Если condition истинно, применяется класс checkedClass, если ложно — uncheckedClass. Это позволяет динамически менять стили элемента на основе состояния приложения.

Вы можете использовать ngClass, чтобы применить имена классов как условно, так и без условий в Angular.

Пример без условий:

[ngClass]="'someClass'">

Условное применение:

[ngClass]="{'someClass': property1.isValid}">

Несколько условий:

[ngClass]="{'someClass': property1.isValid && property2.isValid}">

Использование выражения метода:

[ngClass]="getSomeClass()"

Этот метод должен быть внутри вашего компонента:

getSomeClass() {
    const isValid = this.property1 && this.property2;
    return { someClass1: isValid, someClass2: isValid };
}

Таким образом, вы можете гибко управлять классами в зависимости от состояния ваших свойств.

Angular предоставляет несколько способов условного добавления классов:

Первый способ

active — это имя вашего класса.

[class.active]="step === 'step1'"

Второй способ

active — это имя вашего класса.

[ngClass]="{'active': step=='step1'}"

Третий способ

с использованием тернарного оператора, class1 и class2 — это ваши имена классов.

[ngClass]="(step=='step1')?'class1':'class2'"

Таким образом, вы можете легко управлять классами в зависимости от состояния вашего компонента.