CODEWITHSUNDEEP
htmlangular
Malapati Suresh
Malapati Suresh

Reputation: 80

Dropdown menu to clicking outside close of Angular 8

Hii I'm using click function on p tag,

When user opens the dropdown menu, on click outside close the dropdown in angular

Html code 

<div class="select_cat">
   <p class="cat_name" (click)="openCategoriesList()"> </p>
</div>
<div class="categories_list" *ngIf="openCategories">
   <ul *ngFor="let category of categories"> 
      <span class="title">{{category.group_name}}
      </span> 
      <li *ngFor="let categoryData of category.categories" (click)="categoryClick(categoryData)"> 
      </li> 
   </ul>
</div>

Upvotes: 1

Views: 726

Answers (2)

Gangadhar Gandi
Gangadhar Gandi

Reputation: 2252

Use (document:click) event:

.html code

<div class="select_cat" #paraDiv> /* Created a reference here */
   <p class="cat_name" (click)="openCategoriesList()">Open CategoryList</p>
</div>
<div class="categories_list" *ngIf="openCategories">
   <ul *ngFor="let category of categories"> 
      <span class="title">{{category.group_name}}
      </span> 
      <li *ngFor="let categoryData of category.categories" (click)="categoryClick(categoryData)"> 
      </li> 
   </ul>
</div>

.ts code

@Component({
  host: {
    '(document:click)': 'onDocumentClick($event)',
  }
})

@ViewChild('paraDiv', {static: false}) paraDiv;

onDocumentClick(event) {
   if (!this.paraDiv.nativeElement.contains(event.target)) { // outside click
     this.openCategories = false;
   }
}

Upvotes: 2

Akash Gupta
Akash Gupta

Reputation: 105

 <mat-select #mySelect placeholder="Favorite food">
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{ food.viewValue }}
    </mat-option>
  </mat-select>

   import {Component, ViewChild} from '@angular/core';

@Component({
  selector: 'select-overview-example',
  templateUrl: 'select-overview-example.html',
  styleUrls: ['select-overview-example.css'],
})
export class SelectOverviewExample {
  @ViewChild('mySelect') mySelect;
  foods = [
    {value: 'steak-0', viewValue: 'Steak'},
    {value: 'pizza-1', viewValue: 'Pizza'},
    {value: 'tacos-2', viewValue: 'Tacos'}
  ];

  click() {
    this.mySelect.open();
  }
}

Upvotes: 0

Related Questions