CODEWITHSUNDEEP
javascriptangularangular-ngselect
Davide Quaglio
Davide Quaglio

Reputation: 771

Autoclose dropdown menu problem with ng-select

I'm trying to create a dropdown menu, that closes automatically when the user click outside of it. In this menu I added a ng-select component, but when I click on one of the options, the menu will close, because the dropdown panel of the ng-select is not inside the DOM when it is closed, is there any way to achieve what I want? The dropdown menu to not close when the user select a ng-option? Here there is an example of the problem: https://stackblitz.com/edit/angular-8m1ta5?file=src%2Fapp%2Fapp.component.ts

Here is the code that I use to keep track of the click of the user:

  @ViewChild('father', {static: false}) father;
  @HostListener('document:click', ['$event.target'])
  public onClick(targetElement) {
    const clickedInside = this.father.nativeElement.contains(targetElement);
    if (!clickedInside) {
      this.dropdown = false;
    }
  }

#father identify the container of the dropdown menu.

Upvotes: 3

Views: 16928

Answers (4)

Faz Ahmad
Faz Ahmad

Reputation: 57

for <ng-select> has the [closeOnSelect]=false property added, it won't close after each item is selected, which is useful for selecting multiple items at once.

Example:

<ng-select formControlName="country" [items]="countries" bindValue="code" bindLabel="name" [multiple]="true" placeholder="Select Country" [searchable]="true" [clearable]="true" [virtualScroll]="true" [closeOnSelect]="false">

Upvotes: 0

Uday Nand
Uday Nand

Reputation: 11

You can use the property called [closeOnSelect]=true with ng-select, and you can pass the value as well.

Upvotes: 1

user1859022
user1859022

Reputation: 2705

binding the isOpen property of ng-select to your components dropdown flag should do the trick:

<ng-select placeholder="Status" [isOpen]="dropdown">
    <ng-option [value]="'0'">Option 1</ng-option>
    <ng-option [value]="'1'">Option 2</ng-option>
    <ng-option [value]="'2'">Option 3</ng-option>
</ng-select>

component.ts

export class AppComponent  {
  dropdown = false;

  @ViewChild('father', {static: false}) father;
  @HostListener('document:click', ['$event'])
  public onClick(e) {
    const clickedInside = this.father.nativeElement.contains(e.target);
    if (!clickedInside) {
      this.dropdown = false;
    }else{
      this.dropdown=true;
    }
  }
}

have a look at https://github.com/ng-select/ng-select#inputs

I have altered your stackblitz

Upvotes: 0

Riccardo Turri
Riccardo Turri

Reputation: 286

The Attribute [closeOnSelect]="false" should do the work. You will have to add it to the <ng-select> tag

So, from the stackblitz the code will become:

<ng-select placeholder="Status" [closeOnSelect]="false">
        <ng-option [value]="'0'">Option 1</ng-option>
        <ng-option [value]="'1'">Option 2</ng-option>
        <ng-option [value]="'2'">Option 3</ng-option>
</ng-select>

Here you can find the documentation https://github.com/ng-select/ng-select

Upvotes: 5

Related Questions