<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>

<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>

<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>

<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>

<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>

<fieldset class="slds-form-element">

  <legend class="slds-form-element__legend slds-form-element__label">

    <abbr class="slds-required" title="required">*</abbr>Radio Group Label</legend>

  <div class="slds-form-element__control">

    <div class="slds-radio_button-group">

      <span class="slds-button slds-radio_button">

        <input type="radio" name="example-unique-name-113" id="example-unique-id-115" value="monday" />

        <label class="slds-radio_button__label" for="example-unique-id-115">

          <span class="slds-radio_faux">Mon</span>

        </label>

      </span>

      <span class="slds-button slds-radio_button">

        <input type="radio" name="example-unique-name-113" id="example-unique-id-116" value="tuesday" />

        <label class="slds-radio_button__label" for="example-unique-id-116">

          <span class="slds-radio_faux">Tue</span>

        </label>

      </span>

      <span class="slds-button slds-radio_button">

        <input type="radio" name="example-unique-name-113" id="example-unique-id-117" value="wednesday" />

        <label class="slds-radio_button__label" for="example-unique-id-117">

          <span class="slds-radio_faux">Wed</span>

        </label>

      </span>

      <span class="slds-button slds-radio_button">

        <input type="radio" name="example-unique-name-113" id="example-unique-id-118" value="thursday" />

        <label class="slds-radio_button__label" for="example-unique-id-118">

          <span class="slds-radio_faux">Thu</span>

        </label>

      </span>

      <span class="slds-button slds-radio_button">

        <input type="radio" name="example-unique-name-113" id="example-unique-id-119" value="friday" />

        <label class="slds-radio_button__label" for="example-unique-id-119">

          <span class="slds-radio_faux">Fri</span>

        </label>

      </span>

    </div>

  </div>

</fieldset>

/*

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

    }

  }

​

}