Как менять класс элемента html в зависимости от кнопок через ngClass?

Для изменения класса элемента HTML в зависимости от кнопок можно использовать директиву ngClass в Angular. Директива ngClass позволяет добавлять или удалять классы, основываясь на условиях, заданных в контроллере или шаблоне компонента.

Чтобы использовать ngClass, вам необходимо сначала импортировать его из @angular/common:

import { NgClass } from '@angular/common';

Затем, в шаблоне компонента, вы можете применить директиву ngClass к нужному элементу HTML и определить условия для добавления или удаления классов:

<div [ngClass]="{ 'class1': condition1, 'class2': condition2 }"></div>

В этом примере, если condition1 истинно, то класс class1 будет добавлен к элементу, а если condition2 истинно, то класс class2 будет добавлен к элементу. Если условия ложны, соответствующие классы будут удалены.

Вы также можете использовать более сложные условия для применения классов. Например, чтобы добавить несколько классов, когда оба условия истинны, вы можете использовать логическое И:

<div [ngClass]="{ 'class1 class2': condition1 && condition2 }"></div>

Чтобы применить классы по условию нажатия кнопки, вам нужно добавить обработчики событий для кнопок и изменять значения соответствующих условий:

import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `
    <button (click)="condition1 = !condition1">Button 1</button>
    <button (click)="condition2 = !condition2">Button 2</button>
    <div [ngClass]="{ 'class1': condition1, 'class2': condition2 }"></div>
  `,
})
export class MyComponent {
  condition1 = false;
  condition2 = false;
}

В этом примере, при каждом нажатии на кнопку, соответствующая условная переменная меняет свое значение, и ngClass автоматически обновляет класс элемента HTML в соответствии с новыми значениями условий.

Надеюсь, это объяснение помогло вам понять, как использовать ngClass для изменения классов элемента HTML в зависимости от кнопок в Angular.