Dropdown menu using angular

Question

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

I am the beginner in angular. I am making the website in angular through the tutorial of udemy. I want to make the drop-down button. Both codes are correct. but when I click the drop-down button then the dropdown menu didn't open

`@Directive({
selector: '[appdropdown]'
})
export class DropdownDirective  {
@HostBinding('class.Open') isOpen = false; 
@HostListener('click') toggleOpen () {
    this.isOpen = !this.isOpen;
}
}`

The HTML code and the ts code will be correct but it can not function

    <ul class="nav navbar-nav justify-content-end"> 
    <li class=" nav-item  dropdown" appdropdown>
    <a href="#" class=" nav-link dropdown-toggle" role="button">Manage <span 
    class="caret"></span> </a>
    <ul class="dropdown-menu">
    <li>
    <a href="#"> Save Data</a>
    </li>
    <li>
    <a href="#">Fetch Data</a>
    </li>
    </ul>  
    </li>
    </ul>

@RashmiKumari i will edit the post kindly check it and give me answer thanks — Zulfiqar Hussain Anjum
– Zulfiqar Hussain Anjum, Commented Aug 5, 2018 at 12:35

Joundill · Accepted Answer · 2020-11-14 20:39:02Z

1

You need to import your DropdownDirective in your declarations in app.module.

edited Nov 14, 2020 at 20:39

Joundill

7,82113 gold badges40 silver badges54 bronze badges

answered Nov 14, 2020 at 9:25

marghe

111 bronze badge

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

Comments

Antoniossss · Accepted Answer · 2018-08-05 13:56:34Z

0

Sounds to me like invalid CSS. You are not provided any but I have copy-pasted your example into this Stackblitz

I have added following style

li:not(.Open) .dropdown-menu{
  display: none;
}

obviously it will not do the "dropdown" effect, but demonstrates that overall technique is working

answered Aug 5, 2018 at 13:56

Antoniossss

32.7k7 gold badges67 silver badges119 bronze badges

Comments

Tyler2P · Accepted Answer · 2022-09-18 17:40:08Z

0

'@Directive({
  selector: '[appToggleDirective]',
})
export class ToggleDirectiveDirective {
  constructor(private _el: ElementRef, private rendered: Renderer2) {}

  @HostBinding('class.show') isOpen = false;

  @HostListener('click') toggleOpen() {
    this.isOpen = !this.isOpen;
    let part = this._el.nativeElement.querySelector('.dropdown-menu');
    if (this.isOpen) {
      this.rendered.addClass(part, 'show');
    } else {
      this.rendered.removeClass(part, 'show');
    }
  }
}'

edited Sep 18, 2022 at 17:40

Tyler2P

2,37030 gold badges26 silver badges34 bronze badges

answered Sep 13, 2022 at 18:25

Aqsa Aftab

11 bronze badge

1 Comment

Tyler2P Over a year ago

Your answer could be improved by adding more information on what the code does and how it helps the OP.

Collectives™ on Stack Overflow

Dropdown menu using angular

3 Answers 3

Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Related