bootstrap btn-group open
/*
I solved this be adding a query selector and accessing the children and setting
the class name via the Renderer.
In bootstrap 4, the open class was replaced by the show.
Therefore use show instead. Attach the class on the ul
As shown Below:
*/
import { Directive, ElementRef, HostBinding, HostListener, Input, Renderer2 } from "@angular/core";
@Directive({
selector: "[appDropdown]"
})
export class DropdownDirective {
@Input ("appDropdown") index : number;
constructor(private theElementRef: ElementRef, private theRenderer: Renderer2) { }
@HostListener("click") toggleDrawer() {
let elements = this.theElementRef.nativeElement.querySelectorAll('.show');
if (elements.length > 0) {
this.theRenderer.removeClass(this.theElementRef.nativeElement.children[this.index], "show");
} else {
this.theRenderer.addClass(this.theElementRef.nativeElement.children[this.index], "show");
}
}
}