Angular Dropdown directive doesn't work

Question

I am using Angular 6.0.5 alongside with Bootstrap 4.1.1 and I added a directive for dropdowns. But I can't make it work in no way. I have seen a lot of similar problems here but none was for Bootstrap 4. this is the dropdown html:

<div class="btn-group" appDropdown>
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    Manage
    <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" style="cursor: pointer"
           (click)="OnAddToShoppingList()">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>

and this is the directive:

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

@Directive({
  selector: '[appDropdown]'
})
export class DropdownDirective {
  @HostBinding('class.open') isOpen = false;

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

I suspected about the "open" class. and I think it was a depreacted class from Bootstrap 3. so what is alternative in Bootstrap 4?

bootstrap 4 using show class change your open class to show

Chellappan வ
– Chellappan வ

2018-07-09 15:35:46 +00:00
Commented Jul 9, 2018 at 15:35 — Chellappan வ
– Chellappan வ, Commented Jul 9, 2018 at 15:35
@ChellappanV I tried show but it's not working

Ali Sh
– Ali Sh

2018-07-10 03:40:59 +00:00
Commented Jul 10, 2018 at 3:40 — Ali Sh
– Ali Sh, Commented Jul 10, 2018 at 3:40

Chellappan வ · Accepted Answer · 2018-07-10 04:05:30Z

20

In order to work drop down in bootstrap you need to add show class in two places which you can achieve by get the reference to isOpen variable using angular template ref

If you want to get the reference to directives you need to export the directive first

@Directive({
  selector: '[appDropDown]',
exportAs:'appDropDown'
})

Then you can use the template ref method to achive dropdown

<div class="btn-group" appDropDown #r="appDropDown" >
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" >
    Manage
    <span class="caret"></span></button>
  <ul class="dropdown-menu" [ngClass]="{'show':r.isOpen}" >
    <li><a class="dropdown-item" style="cursor: pointer"
           >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>

I have include example here check out: https://stackblitz.com/edit/angular-h9rgmn

answered Jul 10, 2018 at 4:05

Chellappan வ

27.9k4 gold badges39 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

joel Over a year ago

Did you create a local reference on a directive and then used the current value from the attribute in the directive in ngClass?

Chellappan வ Over a year ago

Yes binding appdropdown attributes to ng lass

Vaggelis Karavasileiadis · Accepted Answer · 2019-09-08 08:57:55Z

1

Make sure you have imported your directive to app.module.ts file

answered Sep 8, 2019 at 8:57

Vaggelis Karavasileiadis

111 bronze badge

Collectives™ on Stack Overflow

Angular Dropdown directive doesn't work

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related