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:

1. In your application, include an element with the kendoDialogContainer directive.

   html

   <div kendoDialogContainer></div>

2. To open the Dialog, use the open method of the service and pass the configuration of the newly created Dialog service as a DialogSettings parameter object.

   ts

   const dialog: DialogRef = this.dialogService.open({
       title: 'Please confirm',
       content: 'Are you sure?'
       ...
   });

3. To determine the action triggered by the user, subscribe to the result event stream.

   ts

   dialog.result.subscribe((result) => {
       if (result instanceof DialogCloseResult) {
           console.log('close');
       }
       ...
   });

Dialogs created through the DialogService automatically close when the user clicks the Close title-bar button or any of the action buttons. Depending on the current configuration settings of the service, you can use the available options and prevent this behavior.

The following example demonstrates how to use the Dialog service.

Change Theme

Theme

Loading ...

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
• Content Component

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.

Change Theme

Theme

Loading ...

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.

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

Change Theme

Theme

Loading ...

Accessing the Dialog Instance

When using the content component, you may need to access the Dialog instance from it—for 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.

ts

@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:

• DialogAction if an action was clicked.
• DialogCloseResult if the Close button of the Dialog was clicked.

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

Change Theme

Theme

Loading ...

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
• Actions template

Actions Collection

You can pass the actions as a collection of DialogAction objects to the actions property of the DialogSettings configuration object.

ts

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

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.

  ts

  <kendo-dialog-actions>
      <button kendoButton (click)="onCancelAction()">Cancel</button>
      <button kendoButton (click)="onConfirmAction()" themeColor="primary" [disabled]="!formGroup.valid">
          Submit
      </button>
  </kendo-dialog-actions>

• As an array of objects that is bound to the actions property of the DialogActionsComponent.

  ts

  <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.

Change Theme

Theme

Loading ...

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:

• DialogAction if an action was clicked.
• DialogCloseResult if the Close button of the Dialog was clicked.

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

Change Theme

Theme

Loading ...

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.

   ts

   @Component({ ... })
   export class UserInfoComponent extends DialogContentBase {
       ...
   }

2. Include the configuration markup for the title-bar, content area, and the actions in the component template.

   ts

   @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.

   ts

   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.

   ts

   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.

Change Theme

Theme

Loading ...

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.

Change Theme

Theme

Loading ...

Specifying Custom Dialog Containers

You can also specify the container for the newly created Windows by passing a ViewContainerRef instance to the appendTo property when you call the open method of the DialogService.

Change Theme

Theme

Loading ...

Specifying CSS Classes and HTML Attributes

The DialogService allows you to apply custom CSS Classes and HTML Attributes to the created Dialog by utilizing the cssClass and htmlAttributes options of the DialogSettings configuration object. The following sections demonstrate how to specify:

• Custom CSS Classes
• Custom HTML Attributes

Custom CSS Classes

To apply custom CSS Classes, specify the cssClass option as part of the DialogSettings configuration object. The cssClass option supports the union type of values that NgClass accepts.

The custom CSS Classes are applied to the wrapper of the Dialog component. If you need to access the actual Dialog element, you can utilize the .k-dialog CSS class.

The following example demonstrates how to set custom CSS Classes to the Dialog.

Change Theme

Theme

Loading ...

Custom HTML Attributes

To apply custom HTML Attributes, specify the htmlAttributes option as part of the DialogService configuration object.

The htmlAttributes option accepts string key-value pairs like the following one.

ts

public showConfirmation(): void {
    this.dialogService.open({
        title: 'Please confirm',
        htmlAttributes: {
            'dir': 'rtl'
        }
    });
}

The following example demonstrates this approach in action.

Change Theme

Theme

Loading ...

Suggested Links

• API Reference of the Dialog