CODEWITHSUNDEEP
angular
Ranjith Varatharajan
Ranjith Varatharajan

Reputation: 1694

Toggle dropdown in Angular

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:

enter image description here

Any advice would be helpful. Thanks.

Upvotes: 0

Views: 7852

Answers (2)

sainu
sainu

Reputation: 2701

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;
   }
}

Upvotes: 2

gokaka
gokaka

Reputation: 136

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.

Upvotes: 0

Related Questions