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 any of the action buttons is clicked. You can prevent this behavior 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 positioned under it.

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 how to customize the content area with a 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

When using the content component, you may need to access the Dialog instance from itfor example, if you 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 from the content component.

@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 can 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, use either of the following approaches:

Actions Collection

You can pass the actions 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 you use this approach, you can configure the buttons 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 can 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 can 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 in the following way:

  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. (Optional) After the invocation of the open method of the DialogService, pass any required input properties to the content component.

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

When you use the single component rendering approach, you can still configure the title-bar and the actions of the Dialog as part of the DialogSettings object instead. If these are passed as part of the configuration, avoid adding them to the content component markup because this will lead to the rendering of multiple title and action components in the created Dialog.

The following example demonstrates how to implement the suggested approach.

Example
View Source
Edit In Stackblitz  
Change Theme:

TitleBar Close Prevention

To prevent the closing of the Dialog when you use the single component rendering approach, 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: