How to use Show Class on DropDown in Angular

Question

I am trying to use a Directive to activate dropdown menu in my Angular project. The class "open" has been deprecated since bootstrap 3 but I am currently using bootstrap 5 and how to use 'show' class instead of 'open'?

my Directive:

import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[appDropDown]',
})
export class DropDownDirective

{
  @HostBinding('class.open') isOpen = false;

  @HostListener('click') toggleOpen() {
    this.isOpen = !this.isOpen;
  }
  constructor() {}
}

my HTML snippet from a component:

<div
      class="btn-group"
      appDropDown>
      <button
        type="button"
        class="btn btn-primary dropdown-toggle ">
        Manage Recipe <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        <li><a href="#">To Shopping List</a></li>
        <li><a href="#">Edit Recipe</a></li>
        <li><a href="#">Delete Recipe</a></li>
      </ul>
    </div>
  </div>

Thanks.

Answer 1

One possibility might be to add a rule to the component or global CSS:

div.btn-group.open ul.dropdown-menu {
  display: block;
}

I suspect your HostBinding + Hostlistener is applying the class "open" to the div where your HostBinding selector is. This in itself is probably not enough with the CSS rules you currently have in your project to show the dropdown.

In order to solve a similar problem with Angular itself and not with simple CSS rules I did the following:

@Directive({
  selector: '[dropdownMenu]'
})
export class DropdownMenuDirective {
  private isShown: boolean = false;
  @HostListener('click') toggleOpen() {

    if (this.isShown) {
      this.renderer.removeClass(this.elRef.nativeElement, 'show');
    } else {
      this.renderer.addClass(this.elRef.nativeElement, 'show');
    }

    this.isShown = !this.isShown;
  }

  constructor(private elRef: ElementRef, private renderer: Renderer2) {}
}

<button class="navbar-toggler" type="button" dropdownMenu>
  <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
  <ul class="navbar-nav me-auto mb-2 mb-lg-0">
    <li class="nav-item">
      <a class="nav-link" href="#" (click)="navigate(false)">Option 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#" (click)="navigate(true)">Option 2</a>
    </li>
  </ul>
</div>

Answer 2

<div class="btn-group" appDropdown #r="appDropdown" >
  <button  type="button" class="btn btn-primary dropdown-toggle" data-bstoggle="dropdown">
    Manage Recipe <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" [ngClass]="{'show':r.isOpen}">
    <li><a class="dropdown-item" href="#">To shopping list</a></li>
    <li><a class="dropdown-item" href="#">Edit Recipe</a></li>
    <li><a class="dropdown-item" href="#">Delete Recipe</a></li>
  </ul>
</div>

In ts file add exportAs along with selector:

selector: '[appDropdown]',
exportAs:'appDropdown'