Toggle dropdown in Angular

Question

Scenario:

When the user clicks the link, a dropdown is shown and clicks other than the link, the dropdown list is hidden. I have done the showing part, but don't know where to start for hiding the dropdown.

Code:

login.component.html

  <div class="actions login__block__actions">
    <div class="dropdown" [ngClass]="{'open':showOption}">
      <a href="#" data-toggle="dropdown" (click)="toggleOption($event)"><i class="zmdi zmdi-more-vert"></i></a>
      <ul class="dropdown-menu pull-right">
        <li><a data-block="#l-register" href="">Create an account</a></li>
        <li><a data-block="#l-forget-password" href="">Forgot password?</a></li>
      </ul>
    </div>
  </div>

login.component.ts

  @HostListener('document:click', ['$event'])
  toggleOption(event) {
    console.log(this._eref.nativeElement.contains(event.target));
    if (this._eref.nativeElement.contains(event.target)) {
      this.showOption = !this.showOption;
    } else {
      this.showOption = false;
    }
  }

Screen:

Any advice would be helpful. Thanks.

Ranjith Varatharajan · Accepted Answer · 2017-06-26 11:55:53Z

2

You can do this with the help of ViewChild and ElementRef

in login.component.html

<div class="actions login__block__actions">
    <div class="dropdown" [ngClass]="{'open':showOption}">
      <a href="#" data-toggle="dropdown" (click)="toggleOption()"><i #loginpopup class="zmdi zmdi-more-vert"></i></a>
      <ul class="dropdown-menu pull-right" *ngIf="this.showOption">
        <li><a data-block="#l-register" href="">Create an account</a></li>
        <li><a data-block="#l-forget-password" href="">Forgot password?</a></li>
      </ul>
    </div>
  </div>

in login.component.ts

@Component({
    // add selector, templateUrl, StyleUrl
    host: { '(document:click)': 'handleClick($event)' },
})

export class LoginComponent {

   @ViewChild('loginpopup') private loginpopup : ElementRef;

   private handleClick(event) {
       if (this.showOption) {
           let clickedComponent = event.target;
           if ( clickedComponent !== this.loginpopup.nativeElement ) {
               this.showOption = false;
           }
       }
   }

   private toggleOption(){
      this.showOption = this.showOption === true ? false : true;
   }
}

edited Jun 26, 2017 at 11:55

Ranjith Varatharajan

1,6924 gold badges37 silver badges83 bronze badges

answered Jun 26, 2017 at 10:17

sainu

2,7013 gold badges26 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ranjith Varatharajan Over a year ago

Thanks @Sainu, It works, but i had to change from this <a href="#" #loginpopup data-toggle="dropdown" (click)="toggleOption()"><i class="zmdi zmdi-more-vert"></i></a> to this <a href="#" data-toggle="dropdown" (click)="toggleOption()"><i #loginpopup class="zmdi zmdi-more-vert"></i></a>

sainu Over a year ago

@RanjithVaradan :) welcome. can you please mark it as answer

gokaka · Accepted Answer · 2017-06-26 10:03:09Z

0

You can display a fullscreen overlay div when you show the dropdown list

  <div class="actions login__block__actions">

    <div class="fullscreen-overlay" *ngIf="showOption" (click)="showOption = false;"></div>

    <div class="dropdown" [ngClass]="{'open':showOption}">
     ...
    </div>
  </div>


.fullscreen-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0, 0.0);
  z-index: 5; // you need change the z-index and make this layer behind you dropdown list.
}

I think it should works.

answered Jun 26, 2017 at 10:03

gokaka

1361 silver badge5 bronze badges

Collectives™ on Stack Overflow

Toggle dropdown in Angular

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related