can't open the dropdown button group by btn-group open

Question

.open is not work in bootstrap 4.3 after the btn-group class to open the dropdown ....

i want to use the directive to load the dropdown without javascript of the bootstrap..

this is the directive :

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

and this is the html code :

 <div class="btn-group" >            
            <button 
            type= "button" 
            class="btn btn-primary dropdown-toggle" >
            Manage Recipe <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
                <li><a href="#">Add to shopping-list</a></li>
                <li><a href="#">edit recipe</a></li>
                <li><a href="#">delete recipe</a></li>
            </ul>
        </div>

Answer 1

data-toggle="dropdown" is missing in your button control. once you add, it should work.

Replace the below line of code for the button in the question.

<button type= "button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Manage Recipe <span class="caret"></span>

Answer 2

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:

Dropdown.directive.ts

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

}

template.html

<div [appDropdown]="1" class="btn-group">
<button style="width: 100%" class="btn btn-primary dropdown-toggle" type="button">Manage Recipe <span
class="caret"></span></button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Add To Shopping List</a></li>
<li><a class="dropdown-item" href="#">Edit Recipe</a></li>
<li><a class="dropdown-item" href="#">Remove Recipe</a></li>
</ul>
</div>