angular - Was ist der Unterschied zwischen der @HostBinding()-Direktive und ElementRef/Renderer?

Ich erstelle eine Direktive für ein Dropdown-Umschaltfeld. Was ich gesehen habe, ist, dass es zwei Ansätze gibt, um diese Direktive zu erstellen. Was sollte die beste Vorgehensweise sein?

Ansatz 1 - Verwendung von @HostBinding()

@HostBinding('class.open') isOpen: boolean = false;   
@HostListener('click') toggleFunc(){   
   this.isOpen = !this.isOpen;   
}   

Ansatz 2 - Verwendung von ElementRef und Renderer

    isOpen: boolean = false;
    constructor(private elementRef: ElementRef, private renderer: Renderer2){}

    @HostListener('click') onToggle(){
        this.isOpen = !this.isOpen;
        if(this.isOpen){
            this.renderer.addClass(this.elementRef.nativeElement, "open");
        }
        else{
            this.renderer.removeClass(this.elementRef.nativeElement, "open");    
        }

}   

Ansatz 1 sieht besser aus, da es nur 3 Codezeilen sind (problemlos). Aber was sollte die beste Vorgehensweise sein? Was sollte ich verwenden, wenn ich solche Direktiven erstelle?
Haben @HostBinding() und ElementRef/Renderer unterschiedliche Anwendungsfälle?

Antwort #1

Es ist besser, den @HostBinding()-Ansatz zu verwenden, weil der Code viel sauberer aussieht als der Renderer2-Ansatz.

Aber wenn Sie Angulars Templating umgehen und eigene UI-Änderungen vornehmen möchten, sollten Sie den Renderer2-Ansatz verwenden und Ihren eigenen benutzerdefinierten Renderer erstellen. https://angular.io/api/core/Renderer2#description

Manipuliere einfach nicht direkt am DOM.