Angular Service for Kendo Dialog throws an error

Question

I need to trigger a dialog through the CanDeactivate routeguard, if the user tries to navigate out of a page without saving the form. I'm following the solution suggested here.

I want to customize the confirm dialog used in the example, using the custom modal dialog we are using across the application. I'm planning to do it using the Kendo Dialog Service. I'm using the exact same example given in the link on one of the existing components in my app, but it's throwing the following console error:

Cannot attach dialog to the page.
Add an element that uses the kendoDialogContainer directive, or set the 'appendTo' property.
See https://www.telerik.com/kendo-angular-ui/components/dialogs/dialog/service/.          
at DialogService.push../node_modules/@progress/kendo-angular-dialog/dist/fesm5/index.js.DialogService.open (index.js:770)
at DashboardLandingComponent.push../src/app/dashboard/dashboard-landing/dashboard-landing.component.ts.DashboardLandingComponent.open (dashboard-landing.component.ts:27)
at Object.handleEvent (dashboard-landing.component.html:52)
at handleEvent (core.js:30650)
at callWithDebugContext (core.js:31720)
at Object.debugHandleEvent [as handleEvent] (core.js:31447)
at dispatchEvent (core.js:21246)
at core.js:29859
at HTMLButtonElement.<anonymous> (platform-browser.js:554)
at ZoneDelegate.invokeTask (zone.js:431) 

The strange thing is that I do have the kendoDialogContainer directive added on the page.

Dashboard.html:

 <button kendoButton (click)="open()">Harmless button</button>
  <div kendoDialogContainer></div>

Dashboard.component.ts:

import { DialogCloseResult, DialogService } from '@progress/kendo-angular-dialog';

public open() {
var dialog = this.dialogService.open({
  title: "Please confirm",
  content: "Are you sure?",
  actions: [
    { text: "No" },
    { text: "Yes", primary: true }
  ]
});

dialog.result.subscribe((result) => {
  if (result instanceof DialogCloseResult) {
    console.log("close");
  } else {
    console.log("action", result);
  }
});

}

Any idea where it is going wrong?

Thanks in advance.

Answer 1

The kendoDialogContainer div needs to be in the app/app.component.html. Had this same problem and this solved it.