Как сделать сервис для управления css классами в Angular?

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

Чтобы создать сервис для управления CSS классами в Angular, вам понадобится выполнить следующие шаги:

1. Импортируйте необходимые модули:

import { Directive, ElementRef, Renderer2 } from '@angular/core';

2. Создайте декоратор @Directive, который будет использоваться для добавления сервиса к элементам:

@Directive({
  selector: '[classManager]'
})
export class ClassManagerDirective {
  constructor(private el: ElementRef, private renderer: Renderer2) { }
}

3. Создайте методы и свойства в сервисе. Например, вы можете создать свойство isActive, которое будет определять, должен ли элемент иметь класс "active":

@Directive({
  selector: '[classManager]'
})
export class ClassManagerDirective {
  isActive: boolean = false;

  constructor(private el: ElementRef, private renderer: Renderer2) { }
}

4. Используйте декоратор @HostBinding, чтобы установить значение атрибута класса на основе свойства isActive. В этом примере мы использовали isActive для добавления или удаления класса "active":

@Directive({
  selector: '[classManager]'
})
export class ClassManagerDirective {
  isActive: boolean = false;

  @HostBinding('class.active')
  get activeClass() {
    return this.isActive;
  }

  constructor(private el: ElementRef, private renderer: Renderer2) { }
}

5. Добавьте методы для управления классами. Например, вы можете добавить метод toggleActive, который будет переключать значение свойства isActive и изменять класс "active":

@Directive({
  selector: '[classManager]'
})
export class ClassManagerDirective {
  isActive: boolean = false;

  @HostBinding('class.active')
  get activeClass() {
    return this.isActive;
  }

  constructor(private el: ElementRef, private renderer: Renderer2) { }

  toggleActive() {
    this.isActive = !this.isActive;
  }
}

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

@Component({
  selector: 'app-example',
  template: `<button (click)="classManager.toggleActive()">Toggle</button>`,
})
export class ExampleComponent {
  constructor(public classManager: ClassManagerDirective) { }
}

В результате созданная директива classManager будет иметь возможность управлять CSS классами хост-элемента. Вы можете вызвать метод toggleActive для переключения класса, и при изменении значения свойства isActive класс "active" будет добавляться или удаляться.