Comment ajouter/supprimer une classe de la directive

Question

J'ai une directive personnalisée qui devrait pouvoir ajouter/supprimer une classe en fonction d'autres conditions.

C'est à dire.

// imports 

@Directive({
    selector: '[customDirective]'
})

export class CustomDirective {
    constructor(service: SomService) {
        // code to add class

        if (service.someCondition()) {
            // code to remove class
        }
    }
}

Answer 1

Si vous ne souhaitez pas utiliser la directive ngClass (Conseil: vous pouvez transmettre une fonction à [ngClass]="myClasses()" si ce serait trop compliqué dans votre modèle), vous pouvez simplement utiliser le Renderer2 pour ajouter une ou plusieurs classes:

export class CustomDirective {

   constructor(private renderer: Renderer2,
               private elementRef: ElementRef,
               service: SomService) {
   }

   addClass(className: string, element: any) {
       this.renderer.addClass(element, className);
       // or use the Host element directly
       // this.renderer.addClass(this.elementRef.nativeElement, className);
   }

   removeClass(className: string, element: any) {
       this.renderer.removeClass(element, className);
   }

}

Answer 2

export class CustomDirective {
   classname:string = "Magenta";

   constructor(private renderer: Renderer2,
               private elementRef: ElementRef,
               service: SomService) {
   }

   addClass(className: string, element: any) {
        // make sure you declare classname in your main style.css
        this.renderer.addClass(this.elementRef.nativeElement, className);
   }

   removeClass(className: string, element: any) {
       this.renderer.removeClass(this.elementRef.nativeElement,className);
   }

}