Topic: Dropdown method not working

Nguyen Ba Tung premium asked 2 years ago

Dropdown method not working enter image description here enter image description here enter image description here

Arkadiusz Idzikowski staff answered 2 years ago

@Nguyen Ba Tung You need to add template variable #dropdown to the element with mdbDropdown directive and then use ViewChild like this:

@ViewChild('dropdown') dropdown: MdbDropdownDirective;


      <div mdbDropdown class="dropdown" #dropdown>
          class="btn btn-primary dropdown-toggle"
          Dropdown button
        <ul mdbDropdownMenu class="dropdown-menu" aria-labelledby="dropdownMenuButton">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>


  @ViewChild('dropdown') dropdown: MdbDropdownDirective;
  constructor() {}

  ngOnInit(): void {}

  ngAfterViewInit(): void {
    Promise.resolve().then(() => {;

Nguyen Ba Tung premium commented 2 years ago

it still doesn't work

Arkadiusz Idzikowski staff commented 2 years ago

@Nguyen Ba Tung I edited my post and added the full HTML/TS code of a working example. We found a problem with a component change detection, that's why I added a workaround with Promise, normally it won't be needed when we add a fix.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 1.0.0-beta5
  • Device: PC
  • Browser: Chrome
  • OS: Linux
  • Provided sample code: No
  • Provided link: No