New to Kendo UI for Angular? Start a free 30-day trial

Angular Service

The DialogService is an Angular service that provides API calls, which are used to create Dialog instances dynamically.

This means that the service helps creating Dialog instances based on user interactions and without the need to define the components in a template.

Getting Started

The Angular dependency injection injects the DialogService automatically in the constructor of the component.

To create new Dialogs, use the open method of the service and subscribe to the result event stream to determine the action triggered by the user. The configuration of the newly created Dialog instance is passed as a DialogSettings parameter object to the open method.

Dialogs created through the DialogService are closed automatically when the title-bar close button or one of the action buttons is clicked. This behavior can be prevented in multiple ways depending on the current configuration settings of the service.

The following example demonstrates how to use the Dialog service.

Example
View Source
Edit In Stackblitz  
Change Theme:

Rendering the Content Area

The DialogService allows you to customize the content area of the created Dialog. This is the area between its title-bar section and the actions below. You can specify the contents of the Dialog content area by using:

Content Template

The Dialog allows the usage of a template expression in its content area. To enable this behavior, pass a TemplateRef instance to the content property of the DialogSettings configuration object.

The following example demonstrates customizing the content area via template.

Example
View Source
Edit In Stackblitz  
Change Theme:

Content Component

The Dialog allows you to render a component instance in its content area. To enable this behavior, pass the component class name to the content property of the DialogSettings configuration object. You could also pass any required input properties to the content component, after the invocation of the open method of the DialogService.

For Angular versions prior to version 9, verify that all dynamically created components are registered as entryComponents in the NgModule of the application. If the components are not registered, Angular throws a runtime error that a component factory for the component does not exist.

The following example demonstrates how to render a component in the content area.

Example
View Source
Edit In Stackblitz  
Change Theme:

Accessing the Dialog Instance

There are occasions in which the Dialog instance should be accessed from the content component (for example to create a custom close button). To achieve this, inject the Dialog instance in the component constructor as a parameter of type DialogRef. The Dialog instance exposes a convenient close method.

The following example demonstrates how to access the Dialog instance.

@Component({
    template: `
        <button (click)="dialog.close()">Close</button>
    `
})
class ChildComponent {
    constructor(
        public dialog : DialogRef
    ) {}
}

Dialog Close Prevention

The DialogService allows you to prevent the closing of the Dialog based on custom logic. To achieve this, specify the preventAction callback as part of the DialogSettings configuration object. This callback allows you to tap into the lifecycle of the dialog and prevent its closing if needed.

The preventAction callback receives a parameter of type DialogResult, which could be either of the following:

The following example demonstrates how to conditionally prevent the closing of the Dialog.

Example
View Source
Edit In Stackblitz  
Change Theme:

Rendering the Actions Area

The DialogService allows you to customize the actions area of the created Dialog by utilizing the actions property of the DialogSettings configuration object. To configure the actions, you could use either:

Actions Collection

The actions can be passed as a collection of DialogAction objects to the actions property of the DialogSettings configuration object.

    const dialog: DialogRef = this.dialogService.open({
        ...
        actions: [
            { text: 'No' },
            { text: 'Yes', primary: true }
        ],
    });

Actions Template

The DialogService also allows you to show custom actions to the user. To enable this behavior, create the template containing the actions, and pass it as a TemplateRef instance to the actions property of the DialogSettings configuration object. When this approach is used, the buttons can be configured in either of the following ways:

  • As standalone Kendo UI Buttons.

    <kendo-dialog-actions>
        <button kendoButton (click)="onCancelAction()">Cancel</button>
        <button kendoButton (click)="onConfirmAction()" [primary]="true" [disabled]="!formGroup.valid">
            Submit
        </button>
    </kendo-dialog-actions>
  • As an array of objects that is bound to the actions property of the DialogActionsComponent.

    <kendo-dialog-actions [actions]="[{text: 'Cancel'}, {text: 'Confirm', primary: true}]">
    </kendo-dialog-actions>

The following example demonstrates how to create a template for the action buttons.

Example
View Source
Edit In Stackblitz  
Change Theme:

Action Prevention

When using the actions property of the DialogSettings configuration object, you could prevent the closing of the Dialog based on the clicked action. To achieve this utilize the preventAction callback and pass it as part of the dialog settings. This callback allows you to tap into the lifecycle of the dialog and prevent its closing if needed.

The preventAction callback receives a parameter of type DialogResult, which could be either of the following:

The following example demonstrates how to prevent the closing of the Dialog based on the current action.

Example
View Source
Edit In Stackblitz  
Change Theme:

Single Component Rendering

The DialogService allows you to provide all building blocks of the Dialog (title-bar, content, and actions) as part of a single component. To achieve this, follow the steps below:

  1. Create the component and extend the DialogContentBase class. This base class is responsible for gluing together the respective title bar, action buttons and events.

    @Component({ ... })
    export class UserInfoComponent extends DialogContentBase {
        ...
    }
  2. Include the configuration markup for the title-bar, content area and the actions in the component template.

    @Component({
      selector: 'user-info',
      template: `
        <!–– Title bar markup -->
        <kendo-dialog-titlebar>
        ...
        </kendo-dialog-titlebar>
    
        <!–– Content section -->
    
        <!–– Actions markup -->
        <kendo-dialog-actions>
            ...
        </kendo-dialog-actions>
    `
    })
    export class UserInfoComponent extends DialogContentBase {
        ...
    }
  3. Pass the component class name to the content property of the DialogSettings configuration object.

    const dialogRef = this.dialogService.open({
        content: UserInfoComponent,
        ...
    });
  4. As an optional final step, you could pass any required input properties to the content component, after the invocation of the open method of the DialogService.

    const dialogRef = this.dialogService.open({
        content: UserInfoComponent,
    });
    
    const userInfo = dialogRef.content.instance;
    userInfo.name = 'admin';
    userInfo.age = 42;

When the single component rendering approach is used, the title-bar and the actions of the Dialog could still be configured as part of the DialogSettings object instead. If passed as part of the configuration, avoid adding them to the content component markup as this will lead to the rendering of multiple title/action components in the created Dialog.

The following example demonstrates the above steps in action.

Example
View Source
Edit In Stackblitz  
Change Theme:

TitleBar Close Event Prevention

To prevent the closing of the Dialog, when the single component rendering approach is used, subscribe to the preventable close event of the DialogTitleBarComponent. This enables you to keep the Dialog opened based on custom logic.

The following example demonstrates how to conditionally prevent the closing of the Dialog.

Example
View Source
Edit In Stackblitz  
Change Theme:

Specifying the Dialog Container

You can specify the container for the newly created Dialogs by using either of the following approaches:

  • Include an element with the kendoDialogContainer directive in your application. If multiple elements with the kendoDialogContainer directive are present, only the last one will be taken into account.

    <div kendoDialogContainer></div>
  • When you call the open method of the DialogService, pass a ViewContainerRef instance to the appendTo property.

Example
View Source
Edit In Stackblitz  
Change Theme: