How to add/remove class from directive

Question

Using a custom directive how would you add/remove a class on the host element based on a specific conditions?

Example:

Answer 1

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);
   }

}