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.

   html

   <div kendoWindowContainer></div>

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

   ts

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

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

   ts

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

The following example demonstrates how to use the Window service.

Change Theme

Theme

Loading ...

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.

Change Theme

Theme

Loading ...

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.

Change Theme

Theme

Loading ...

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.

ts

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

Change Theme

Theme

Loading ...

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.

Change Theme

Theme

Loading ...

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.

Change Theme

Theme

Loading ...

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.

Change Theme

Theme

Loading ...

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.

ts

public openWindow(): void {
    this.windowService.open({
        title: 'My Window',
        htmlAttributes: {
            'dir': 'rtl'
        }
    });
}

The following example demonstrates this approach in action.

Change Theme

Theme

Loading ...

Suggested Links

• API Reference of the Window