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.

View Source
Edit In Stackblitz  
Change Theme:

Rendering the Content

You can render the content of the Window by:

Using Strings

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.

Using Templates

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

Using Components

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.

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 there is no component factory for the component.

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.

    template: `
        <button (click)="window.close()">Close</button>
class ChildComponent {
        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.

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 method, pass a ViewContainerRef instance to the appendTo property.

View Source
Edit In Stackblitz  
Change Theme: