CODEWITHSUNDEEP
angulartwitter-bootstrap
charsi
charsi

Reputation: 3817

Close menu when user clicks away Angular 2+

I've got a dropdown menu in my navbar which I open and close by adding a show class to it when clicked.

This works but requires the user to click the button again to close the menu. As a semi-solution I now listen for router changes and close the menu whenever the route changes.

However I'd like the menu to close if anything except the menu button is clicked. So that users can click the background to get rid of the menu. How do I achieve this?

<button class="btn btn-link nav-link dropdown-toggle" (click)="showDropdown=!showDropdown" id="navbarDropdown" role="button" >

<div class="dropdown-menu" [ngClass]="{'show': showDropdown}">

Please don't offer solutions with jquery. I am not using it in this project.

Upvotes: 0

Views: 3018

Answers (1)

OPulido
OPulido

Reputation: 329

You can do this listening the mouseout event on your dropdown menu and setting the variable showDropdown to false. I mean:

<button class="btn btn-link nav-link dropdown-toggle" (click)="showDropdown=!showDropdown" id="navbarDropdown" role="button">

<div class="dropdown-menu" [ngClass]="{'show': showDropdown}" (mouseout)="showDropdown = false"> <!-- This --!>

Hope can help!!!

Upvotes: 1

Related Questions