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:

1. In your application, include an element with the kendoWindowContainer directive. If multiple elements with the kendoWindowContainer directive are present, only the last one will be taken into account.

Copy Code<div kendoWindowContainer></div>

1. To open the Window, use the open method of the service and pass the configuration of the newly created Window service as a WindowSettings parameter object.

Copy Codeconst window: WindowRef = this.windowService.open({
    title: 'My Window',
    content: 'My Content!',
    ...
});

1. (Optional) To detect when the user closes the Window, subscribe to the result event stream.

Copy Codewindow.result.subscribe((result) => {
    if (result instanceof WindowCloseResult) {
        ...
    }
});

The following example demonstrates how to use the Window service.

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:

• Strings
• Templates
• Components

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.

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.

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.

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

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.

Specifying Custom Window 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 WindowService.open method.

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
• Custom HTML Attributes

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.

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.

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

The following example demonstrates this approach in action.

Suggested Links

• API Reference of the Window