Dialog is always open on page load

[Severin Spoerri]

Good Day Everybody

The dialog should only be open on user interaction (press of a button or such), but it always open on loading of the page.

We are using:

  "dependencies": {

      "@angular/animations": "~9.1.3",

      "@angular/cdk": "^9.2.1",

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

      "@angular/compiler": "~9.1.3",

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

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

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

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

      "@angular/router": "~9.1.3",

      "@ngneat/transloco": "^2.17.0",

      "@syncfusion/ej2-angular-buttons": "^18.1.42",

      "@syncfusion/ej2-angular-calendars": "^18.1.42",

      "@syncfusion/ej2-angular-dropdowns": "^18.1.42",

      "@syncfusion/ej2-angular-grids": "^18.1.53",

      "@syncfusion/ej2-angular-inputs": "^18.1.42",

      "@syncfusion/ej2-angular-lists": "^18.1.42",

      "@syncfusion/ej2-angular-navigations": "^18.1.42",

      "@syncfusion/ej2-angular-notifications": "^18.1.42",

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

      "@syncfusion/ej2-notifications": "^18.1.42",

      "angular-in-memory-web-api": "^0.9.0",

      "rxjs": "^6.5.5",

      "tslib": "^1.11.1",

      "zone.js": "^0.10.3"

   },

   "devDependencies": {

      "@angular-devkit/build-angular": "~0.901.3",

      "@angular/cli": "~9.1.3",

      "@angular/compiler-cli": "~9.1.3",

      "@angular/language-service": "~9.1.3",

      "@types/jasmine": "^3.5.10",

      "@types/jasminewd2": "~2.0.3",

      "@types/node": "^12.12.37",

      "codelyzer": "^5.2.2",

      "jasmine-core": "~3.5.0",

      "jasmine-spec-reporter": "~4.2.1",

      "karma": "~4.3.0",

      "karma-chrome-launcher": "~3.1.0",

      "karma-coverage-istanbul-reporter": "~2.1.0",

      "karma-jasmine": "~2.0.1",

      "karma-jasmine-html-reporter": "^1.5.3",

      "protractor": "^5.4.4",

      "ts-node": "~8.3.0",

      "tslint": "~5.18.0",

      "tslint-config-prettier": "^1.18.0",

      "tslint-plugin-prettier": "^2.3.0",

      "typescript": "~3.7.4"

   }

We implemented the component as in your "Getting Started Guide" of your Documentation: https://ej2.syncfusion.com/angular/documentation/dialog/getting-started/#adding-dialog-module

We tried to reproduce the behavior on Stackblitz, but I could unfortunately not get the package: @syncfusion/ej2-angular-popups to work.

Thank you very much for your kind review and most appreciated help.

[Indrajith Srinivasan]

Hi Severin, 

 

Greetings from Syncfusion support, 

 

We have validated your reported query. Yes,  you can show the dialog only on button click, by disable the visible property of the dialog. We have also prepared a sample that tries to meet your requirements. 

 

API link: https://ej2.syncfusion.com/angular/documentation/api/dialog#visible 

 

Sample: https://stackblitz.com/edit/angular-nvf4zk-is7hmt?file=app.component.ts 

 

Please let us know if the solution helps, 

 

Regards, 

Indrajith