CODEWITHSUNDEEP
javascriptangulartypescript
Margi212
Margi212

Reputation: 153

How to open angular2-multiselect-dropdown on clicking external button

I was trying to access angular2-multiselect-dropdown vesrion 4.6.3 .

Here, I wanted to open the dropdown on external button click.

<angular2-multiselect 
  [data]="dropdownList" 
  [(ngModel)]="selectedItems"
  [settings]="dropdownSettings" 
  #dropdownRef>
</angular2-multiselect>
        
<button (click)="openDropdown" >
  Click Here to Open Dropdown
</button>
    
@ViewChild('dropdownRef',{static:false}) dropdownRef: AngularMultiSelect;
            
openDropdown(){
  // Open Dropdown Method not working
  this.dropdownRef.openDropdown();
 }

Reproduce link : https://stackblitz.com/edit/r7-angular2-multislect-8as6pk?file=src%2Fapp%2Fapp.component.html

Upvotes: 0

Views: 1180

Answers (1)

Rafael Pizao
Rafael Pizao

Reputation: 841

I was only able to use CSS properties to control the display.

  onItemSelect(item: any) {
    console.log(item);
    console.log(this.dropdownList);

    this.renderer.removeStyle(this.getElementDropdown(), 'display')
  }

  openDropdown(){
    this.renderer.setStyle(this.getElementDropdown(), 'display', 'block');
  }

  private getElementDropdown(): HTMLElement{
    return document.getElementsByClassName("dropdown-list")[0] as HTMLElement;
  }

Upvotes: 1

Related Questions