Close popup in Angular Drop down list component
4 Apr 20232 minutes to read
By using the hidePopup
method in DropDownList, you can close the popup on scroll when triggered the windows scroll event.
The following example demonstrate about how to close the popup on scroll.
import { Component, ViewChild } from '@angular/core';
import { DropDownListComponent } from '@syncfusion/ej2-angular-dropdowns';
@Component({
selector: 'app-root',
// specifies the template string for the DropDownList component with change event
template: `<ejs-dropdownlist #ddlelement id='ddlelement' #samples [dataSource]='data' [placeholder]='placeholder'></ejs-dropdownlist>`
})
export class AppComponent {
constructor() {
// bind the onscroll event to window
window.onscroll = () => {
this.dropDownListObject.hidePopup();
}
}
// defined the array of data
public data: string[] = ['Badminton', 'Basketball', 'Cricket', 'Golf', 'Hockey', 'Rugby'];
// set placeholder text to DropDownList input element
public placeholder: string = 'Select a game';
@ViewChild('ddlelement')
public dropDownListObject: DropDownListComponent;
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,FormsModule, ReactiveFormsModule, DropDownListModule, ButtonModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);