Dropdown method not working

@ViewChild('dropdown') dropdown: MdbDropdownDirective;

      <div mdbDropdown class="dropdown" #dropdown>
        <button
          class="btn btn-primary dropdown-toggle"
          type="button"
          id="dropdownMenuButton"
          aria-expanded="false"
          mdbDropdownToggle
        >
          Dropdown button
        </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>
        </ul>
      </div>

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

  ngOnInit(): void {}

  ngAfterViewInit(): void {
    Promise.resolve().then(() => {
      this.dropdown.show();
    });
  }

Nguyen Ba Tung pro premium commented 3 years ago

it still doesn't work https://i.imgur.com/uENPDPj.jpg https://i.imgur.com/yqGUlrp.jpg https://i.imgur.com/PNAvcxT.jpg

---

Arkadiusz Idzikowski staff commented 3 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.

---