Angular 9.1.6 & Syncfusion Dialog support

[Aniraj]

Hello,

I've been trying to add a simple dialog with Syncfusion + Dialog + Angular 9 on Ionic 5 hybrid mobile framework.

Tried the example given in https://www.syncfusion.com/kb/11177/how-to-get-started-easily-with-syncfusion-angular-9-modal-dialog, as is.

However, I face with an exception at this.confirmDialog.show();, as "TypeError: this.confirmDialog.show is not a function"

package.json:

    "@angular/animations": "^9.1.9",

    "@angular/common": "~9.1.6",

    "@angular/core": "~9.1.6",

    "@angular/fire": "^6.0.0",

    "@angular/forms": "~9.1.6",

    "@angular/platform-browser": "~9.1.6",

    "@angular/platform-browser-dynamic": "~9.1.6",

     :

    "@syncfusion/ej2-angular-base": "^18.1.57",

    "@syncfusion/ej2-angular-popups": "^18.1.57",

    "@syncfusion/ej2-base": "^18.1.57",

     :

app.module:

import { DialogModule } from '@syncfusion/ej2-angular-popups';

@NgModule({

  imports: [DialogModule,....]

Installing npm modules had thrown warnings

Note: @syncfusion/[email protected] requires a peer of @angular/[email protected] - 9.1.3

Is Angular 9 support added to Syncfusion + Dialog libraries?

Regards

_AKR_

[Revanth Krishnan]

Hi Aniraj, 

 

Greetings from Syncfusion support. 

 

We have validated your queries below, 

 

Query 1: “Is Angular 9 support added to Syncfusion + Dialog libraries?” 

 

Yes, the Syncfusion Dialog component supports Angular version 9. 

 

Query 2: “face with an exception at this.confirmDialog.show();, as ‘TypeError: this.confirmDialog.show is not a function’?”, and the error may occurred due to the dialog component not imported properly when rendering the dialog which was not mentioned in the documentation. 

https://www.syncfusion.com/kb/11177/how-to-get-started-easily-with-syncfusion-angular-9-modal-dialog

 

We will correct the documentation from our end as soon as possible. 

 

We have prepared a sample based on the code snippet shared with Angular 9 version. 

 

Code Snippet: 

 

import { Component, ViewChild, OnInit, ElementRef } from '@angular/core'; 

import { DialogComponent } from '@syncfusion/ej2-angular-popups'; 

import { EmitType } from '@syncfusion/ej2-base'; 

 

export class AppComponent implements OnInit { 

   @ViewChild('ejDialog') ejDialog: DialogComponent; 

  // Create element reference for dialog target element. 

  @ViewChild('container', { read: ElementRef }) container: ElementRef; 

  // The Dialog shows within the target element. 

  public targetElement: HTMLElement; 

 

  // To get all element of the dialog component after component get initialized. 

  ngOnInit() { 

    this.initilaizeTarget(); 

  } 

 

  // Initialize the Dialog component's target element. 

  public initilaizeTarget: EmitType<object> = () => { 

    this.targetElement = document.getElementById('container'); 

  } 

 

  // Hide the Dialog when click the footer button. 

  public hideDialog: EmitType<object> = () => { 

      this.ejDialog.hide(); 

  } 

 

  // Enables the footer buttons 

  public buttons: Object = [ 

    { 

      'click': this.hideDialog.bind(this), 

      // Accessing button component properties by buttonModel property 

        buttonModel:{ 

        content: 'OK', 

        // Enables the primary button 

        isPrimary: true 

      } 

    }, 

    { 

      'click': this.hideDialog.bind(this), 

      buttonModel: { 

        content: 'Cancel' 

      } 

    } 

  ]; 

 

  // Sample level code to handle the button click action 

  public onOpenDialog = function(event: any): void { 

      // Call the show method to open the Dialog 

      this.ejDialog.show(); 

  }; 

} 

  

Sample: https://www.syncfusion.com/downloads/support/forum/155239/ze/angular9-Dialog902053249 

 

Documentation: https://ej2.syncfusion.com/angular/documentation/dialog/getting-started/#enable-footer 

 

Please let us know and confirm whether the above code snippet and the sample helps to resolve the issue. 

 

Regards, 

Revanth