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

Angular Service

The WindowService is an Angular service providing API calls, which are used to create Window instances dynamically.

This means that the service helps create Window instances from TypeScript based on user interactions and without the need to define the component in a template.

Getting Started

The Angular dependency injection injects the Window service automatically in the constructors of the component. To create new Windows, use the open method. Optionally, to detect when the user closes the Window, subscribe to the result event stream.

The following example demonstrates how to use the Window service.

Example
View Source
Edit In Stackblitz  
Change Theme:

Rendering the Content Area

The WindowService allows you to customize the content area of the created Window.

You can specify the content area of the Window by using:

Content String

You can specify the content of the Window by setting it as a string. For more information on how to utilize this approach, refer to the previous example.

Content Template

The Window allows the usage of template expressions in its content area. To enable this behavior, pass a TemplateRef instance.

Example
View Source
Edit In Stackblitz  
Change Theme:

Content Component

The Window also allows the rendering of component types in its content area. To enable this behavior, pass the class of the child component in the content option.

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

To access and close the Window from the child component, use a constructor parameter of the WindowRef type. The parameter will receive the Window instance.

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

Specifying Custom Title Bar

The Window allows you to render a custom title bar by passing a TemplateRef instance to the titleBarContent option.

To associate the title bar with the current Window component instance, pass the implicit parameter of the TitleBar template as a window input to each action that is used in the title bar.

Example
View Source
Edit In Stackblitz  
Change Theme:

Window Close Prevention

The WindowService allows you to prevent the closing of the Window based on custom logic. To achieve this, specify the preventClose callback as part of the WindowSettings configuration object. This callback allows you to tap into the lifecycle of the window and prevent its closing if needed.

The preventClose callback receives a parameter of type WindowCloseResult if the Close button was clicked or the close method was called with no argument. Otherwise it gets data of type any representing the arguments with which the close method was called.

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

Example
View Source
Edit In Stackblitz  
Change Theme:

Specifying the Window Container

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

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

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

Example
View Source
Edit In Stackblitz  
Change Theme:

Specifying CSS Classes and HTML Attributes

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

Custom CSS Classes

To apply custom CSS Classes, specify the cssClass option as part of the WindowSettings configuration object.

The cssClass option supports the union type of values that NgClass accepts.

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

Example
View Source
Edit In Stackblitz  
Change Theme:

Custom HTML Attributes

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

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

    htmlAttributes: {
        'dir': 'rtl',
        ...
    }

The following example demonstrates this approach in action.

Example
View Source
Edit In Stackblitz  
Change Theme: