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>
marghe :
You need to import your DropdownDirective in your declarations in app.module.",
2020-11-14T09:25:38
Antoniossss :
Sounds to me like invalid CSS. You are not provided any but I have copy-pasted your example into this Stackblitz\n\nI have added following style\n\nli:not(.Open) .dropdown-menu{\n display: none;\n}\n\n\nobviously it will not do the \"dropdown\" effect, but demonstrates that overall technique is working",
2018-08-05T13:56:34