xxxxxxxxxx
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
xxxxxxxxxx
<div class="btn-group">
<button type="button" class="btn btn-success">Add</button>
<button type="button" class="btn btn-warning">Update</button>
<button type="button" class="btn btn-danger">Delete</button>
</div>
xxxxxxxxxx
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
xxxxxxxxxx
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<button type="button" class="btn btn-secondary">3</button>
<button type="button" class="btn btn-secondary">4</button>
</div>
<div class="btn-group mr-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-secondary">5</button>
<button type="button" class="btn btn-secondary">6</button>
<button type="button" class="btn btn-secondary">7</button>
</div>
<div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-secondary">8</button>
</div>
</div>
xxxxxxxxxx
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
xxxxxxxxxx
/*
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");
}
}
}