Open a dialog on popup item click in Angular Drop down button component

27 Sep 20234 minutes to read

This section explains about how to open a dialog on DropdownButton popup item click.
This can be achieved by handling dialog open in select event of the DropdownButton.

In the following example, Dialog will open while selecting Other Folder... item.

app.component.ts

import { Component, ViewChild } from '@angular/core';
import { ItemModel, MenuEventArgs, DropDownButtonComponent  } from '@syncfusion/ej2-angular-splitbuttons';
import { DialogComponent } from '@syncfusion/ej2-angular-popups';

@Component({
    selector: 'app-root',
    template: `<div class="e-section-control">
                <!-- To render Dialog. -->
               <ejs-dialog #dialog [buttons]='alertDlgButtons' [visible]='false' content='Move Items To "Web Team"' width='250px' [position]='position'>
                </ejs-dialog>
                <!-- To render DropDownButton. -->
               <button ejs-dropdownbutton #dropdownbutton [items]='items' content='Move' iconCss='ddb-icons e-folder' cssClass='e-vertical' iconPosition='Top' (select)='select($event)'></button>
               </div>`
})

export class AppComponent {
  @ViewChild('dialog')
  public alertDialog?: DialogComponent;
  @ViewChild('dropdownbutton')
  public dropdownbutton?: DropDownButtonComponent;

  public position: any = {X: 100, Y: 100};

  public alertDlgButtons: Object[] = [{
    buttonModel: {
        isPrimary: true,
        content: 'Submit',
        cssClass: 'e-flat',
    },
    click: function () {
        (this as any).hide();
    }
  }];
   // Initialize action items.
   public items: ItemModel[] = [
    {
        text: 'Archive'
    },
    {
        text: 'Inbox'
    },
    {
        text: 'HR Portal'
    },
    {
        separator: true
    },
    {
        text: 'Other Folder...'
    },
    {
        text: 'Copy to Folder'
    }];
    // To open dialog on selecting `Other Folder...` item.
    public select (args: MenuEventArgs) {
       if (args.item.text === 'Other Folder...') {
        this.alertDialog!.show();
      }
    }

}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DropDownButtonModule } from '@syncfusion/ej2-angular-splitbuttons';
import { AppComponent } from './app.component';
import { DialogModule } from '@syncfusion/ej2-angular-popups';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        DialogModule,
        DropDownButtonModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);