How to use dropdown with a click event inside the navmenu?

Topic: How to use dropdown with a click event inside the navmenu?

Mattijs Ingelbrecht asked 5 years ago

Do you have an example how to use the dropdown with a click event as a navlink inside the mdb-navbar ?

Expected behavior Click event is called on a tag

Actual behavior No event is called.

Resources (screenshots, code snippets etc.)

<li class="nav-item dropdown" dropdown>
      <p dropdownToggle mdbWavesEffect type="button" class="nav-link dropdown-toggle waves-light">
      <span class="caret" [translate]="'navmenu.language'"
            [translateParams]="{currentLanguage: currentLanguage}"></span></p>
      <div *dropdownMenu class="dropdown-menu dropdown dropdown-primary" role="menu">
        <a class="dropdown-item waves-light" mdbWavesEffect href="" (click)="useLanguage('nl')">NL</a>
        <a class="dropdown-item waves-light" mdbWavesEffect href="" (click)="useLanguage('eng')">ENG</a>
      </div>
    </li>

Add comment

Arkadiusz Idzikowski staff answered 5 years ago

0 0 Best answer

Please take a look at the 'Navbar with image dropdown'. There are two dropdowns, one can be opened from the 'dropdown' button and second after clicking on the avatar icon.

https://mdbootstrap.com/docs/angular/navigation/navbar/#basic-example

Add comment

Mattijs Ingelbrecht answered 5 years ago

0 0 Best answer

I want to use the click inside the menu so on the

          <a class="dropdown-item waves-light" mdbWavesEffect href="#">Action</a>

Thanks

Arkadiusz Idzikowski staff commented 5 years ago

Just to clarify - you want to fire the useLanguage method after click on dropdown item and the click event doesn't work? Which version of MDB Angular do you use?

I tried to reproduce that on my end but without success. Please add a console log to your useLanguage function to make sure that it works correctly.

If you use empty href on the a element, your app will be reloaded on link click. Maybe this is the cause of the problem. If you don't need to use a element there, you can replace it with a div.

Add comment

Mattijs Ingelbrecht answered 5 years ago

0 0 Best answer

I want to use the click in a menu option in the dropdown.

<li class="nav-item dropdown" dropdown>
  <p dropdownToggle mdbWavesEffect type="button" class="nav-link dropdown-toggle waves-light">
  <span class="caret" [translate]="'navmenu.language'"
        [translateParams]="{currentLanguage: currentLanguage}"></span></p>
  <div *dropdownMenu class="dropdown-menu dropdown dropdown-primary" role="menu">
    <a class="dropdown-item waves-light" mdbWavesEffect href="" (click)="useLanguage('nl')">NL</a>
    <a class="dropdown-item waves-light" mdbWavesEffect href="" (click)="useLanguage('eng')">ENG</a>
  </div>
</li>

Arkadiusz Idzikowski staff commented 5 years ago

Did you try the solutions I proposed in my previous comment? I couldn't reproduce this problem on my end, the event was correctly captured and the useLanguage method fired on option click.

Please provide full html/ts code that you use.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

User: Free
Premium support: No
Technology: MDB Angular
MDB Version: 8.7.0
Device: Desktop
Browser: Chrome
OS: Windows 10
Provided sample code: No
Provided link: No

Mattijs Ingelbrecht

55Support score
3Questions 4Answers

0Snippets likes 0Snippets