# Angular Service

The `WindowService` is an [Angular service](https://angular.dev/guide/di/creating-and-using-services#) 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](https://angular.dev/guide/di%22) 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`](https://www.telerik.com/kendo-angular-ui-develop/components/dialogs/api/windowcontainerdirective) directive. If multiple elements with the [`kendoWindowContainer`](https://www.telerik.com/kendo-angular-ui-develop/components/dialogs/api/windowcontainerdirective) directive are present, only the last one will be taken into account.

   ```html
   <div kendoWindowContainer></div>
   ```

2. To open the Window, use the [`open`](https://www.telerik.com/kendo-angular-ui-develop/components/dialogs/api/windowservice#open) method of the service and pass the configuration of the newly created Window service as a [`WindowSettings`](https://www.telerik.com/kendo-angular-ui-develop/components/dialogs/api/windowsettings) parameter object. For example, use the [`title`](https://www.telerik.com/kendo-angular-ui-develop/components/dialogs/api/windowsettings#title) property to set the Window titlebar text.

   ```ts
   const window: WindowRef = this.windowService.open({
       title: 'My Window',
       content: 'My Content!',
       // You can add other WindowSettings options, such as htmlAttributes.
   });
   ```

3. (Optional) To detect when the user closes the Window, subscribe to the [`result`](https://www.telerik.com/kendo-angular-ui-develop/components/dialogs/api/windowref#result) event stream.

   ```ts
   window.result.subscribe((result) => {
       if (result instanceof WindowCloseResult) {
           // Handle the WindowCloseResult here.
       }
   });
   ```

The following example demonstrates how to use the Window service.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/dialogs/window/service/source.txt)

## 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](https://www.telerik.com/kendo-angular-ui-develop/components/dialogs/window/service#content-string)
* [Templates](https://www.telerik.com/kendo-angular-ui-develop/components/dialogs/window/service#content-template)
* [Components](https://www.telerik.com/kendo-angular-ui-develop/components/dialogs/window/service#content-component)

### 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`](https://angular.dev/api/core/TemplateRef) instance.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/dialogs/window/service/template/source.txt)

### 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`](https://www.telerik.com/kendo-angular-ui-develop/components/dialogs/api/windowsettings#content) option.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/dialogs/window/service/component/source.txt)

To access and close the Window from the child component, use a constructor parameter of the [`WindowRef`](https://www.telerik.com/kendo-angular-ui-develop/components/dialogs/api/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`](https://angular.dev/api/core/TemplateRef) instance to the [`titleBarContent`](https://www.telerik.com/kendo-angular-ui-develop/components/dialogs/api/windowsettings#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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/dialogs/window/service/titlebar/source.txt)

## Window Close Prevention

The `WindowService` allows you to prevent the closing of the Window based on custom logic. To achieve this, specify the [`preventClose`](https://www.telerik.com/kendo-angular-ui-develop/components/dialogs/api/windowsettings#preventclose) callback as part of the [`WindowSettings`](https://www.telerik.com/kendo-angular-ui-develop/components/dialogs/api/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`](https://www.telerik.com/kendo-angular-ui-develop/components/dialogs/api/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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/dialogs/window/service/prevent-closing/source.txt)

## Specifying Custom Window Containers

You can also specify the container for the newly created Windows by passing a [`ViewContainerRef`](https://angular.dev/api/core/ViewContainerRef) instance to the [`appendTo`](https://www.telerik.com/kendo-angular-ui-develop/components/dialogs/api/windowsettings) property when you call the `WindowService.open` method.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/dialogs/window/service/window-container/source.txt)

## 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`](https://www.telerik.com/kendo-angular-ui-develop/components/dialogs/api/windowsettings#cssclass) and [`htmlAttributes`](https://www.telerik.com/kendo-angular-ui-develop/components/dialogs/api/windowsettings#htmlattributes) options of the [`WindowSettings`](https://www.telerik.com/kendo-angular-ui-develop/components/dialogs/api/windowsettings) configuration object. The following sections demonstrate how to specify:

* [Custom CSS Classes](https://www.telerik.com/kendo-angular-ui-develop/components/dialogs/window/service#custom-css-classes)
* [Custom HTML Attributes](https://www.telerik.com/kendo-angular-ui-develop/components/dialogs/window/service#custom-html-attributes)

### Custom CSS Classes

To apply custom CSS Classes, specify the [`cssClass`](https://www.telerik.com/kendo-angular-ui-develop/components/dialogs/api/windowsettings#cssclass) option as part of the [`WindowSettings`](https://www.telerik.com/kendo-angular-ui-develop/components/dialogs/api/windowsettings) configuration object.

> The `cssClass` option supports the union type of values that [NgClass](https://angular.dev/api/common/NgClass) accepts.

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

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/dialogs/window/service/css-class/source.txt)

### Custom HTML Attributes

To apply custom HTML Attributes, specify the [`htmlAttributes`](https://www.telerik.com/kendo-angular-ui-develop/components/dialogs/api/windowsettings#htmlattributes) option as part of the [`WindowSettings`](https://www.telerik.com/kendo-angular-ui-develop/components/dialogs/api/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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/dialogs/window/service/html-attributes/source.txt)

## Suggested Links

* [API Reference of the Window](https://www.telerik.com/kendo-angular-ui-develop/components/dialogs/api/windowcomponent)