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

Как использовать директиву NgClass для динамической привязки стилей к компонентам

Директива NgClass в Angular динамически применяет CSS-классы к элементам в зависимости от состояния компонента. Это позволяет гибко назначать или удалять классы на основе условий.

Пример использования:

<div [ngClass]="{'active': isActive, 'disabled': isDisabled}">
  Этот элемент будет активен или отключен в зависимости от состояния.
</div>

Классы active и disabled применяются в зависимости от переменных isActive и isDisabled.

Динамическая привязка через объект:

NgClass часто используется для привязки классов через объект, где ключи — это имена классов, а значения — булевые выражения.

@Component({
  selector: 'app-example',
  template: `<button [ngClass]="buttonClasses">Кнопка</button>`
})
export class ExampleComponent {
  isActive = true;
  isDisabled = false;

  get buttonClasses() {
    return {
      'btn-active': this.isActive,
      'btn-disabled': this.isDisabled
    };
  }
}

👉 @sWebDev

👍5❤2🔥1

www.tgoop.com/sWebDev/3185

1.46K viewsOct 7, 2024 at 07:43

Как использовать директиву NgClass для динамической привязки стилей к компонентам

Директива NgClass в Angular динамически применяет CSS-классы к элементам в зависимости от состояния компонента. Это позволяет гибко назначать или удалять классы на основе условий.

Пример использования:

<div [ngClass]="{'active': isActive, 'disabled': isDisabled}">
  Этот элемент будет активен или отключен в зависимости от состояния.
</div>

@Component({
  selector: 'app-example',
  template: `<button [ngClass]="buttonClasses">Кнопка</button>`
})
export class ExampleComponent {
  isActive = true;
  isDisabled = false;

  get buttonClasses() {
    return {
      'btn-active': this.isActive,
      'btn-disabled': this.isDisabled
    };
  }
}

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