Open a dialog on ContextMenu item click

import { Component, ViewChild } from '@angular/core';
import { MenuItemModel, MenuEventArgs } from '@syncfusion/ej2-navigations';
import { DialogComponent } from '@syncfusion/ej2-angular-popups';

@Component({
  selector: 'app-root',
  template: `<div id="target">Right click / Touch hold to open the ContextMenu</div>
  <ejs-dialog #dialog [buttons]='alertDlgButtons' [visible]='visible' content='This file can be saved as PDF' width='200px' height='110px' [position]='position'>
  </ejs-dialog>
  <ejs-contextmenu target="#target" [items]="data" (select)="itemSelect($event)"></ejs-contextmenu>`
})

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

  name = 'Angular';
  data= [
  {
    text: 'Back'
  },
  {
    text: 'Forward'
  },
  {
    text: 'Reload'
  },
  {
    separator: true
  },
  {
    text: 'Save As...'
  },
  {
    text: 'Print'
  },
  {
    text: 'Cast'
  }
  ];

  public visible: Boolean = false;

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

  public alertDlgButtons: Object[] = [{
        buttonModel: {
            isPrimary: true,
            content: 'Submit',
            cssClass: 'e-flat',
        },
        click: function () {
            this.hide();
        }
    }];

  public itemSelect(args: MenuEventArgs): void {
    if (args.item.text === "Save As...") {
      this.alertDialog.show();
    }
  }
}

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

enableRipple(true);

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        DialogModule,
        ContextMenuModule
    ],
    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);