# Repositioning the Window Dynamically

## Environment

<table>
	<tr>
		<td>Product</td>
		<td>Progress® Kendo UI® for Angular Window</td>
	</tr>
</table>

## Description

How can I reposition the Kendo UI for Angular Window after the user dragged it outside the allowed window boundaries?

## Solution

1. Use a two-way binding for the [`left`](https://www.telerik.com/kendo-angular-ui/components/dialogs/api/windowcomponent#left) and [`top`](https://www.telerik.com/kendo-angular-ui/components/dialogs/api/windowcomponent#top) properties of the Window.

   ```html
       ...
       <kendo-window
           *ngIf="opened"
           [(left)]="left"
           [(top)]="top"
           (dragEnd)="onEnd()"
           title="Please provide additional data"
           (close)="close()"
           [width]="width"
           [height]="height">
       ...
   ```

   ```ts
       ...
       export class AppComponent {
           public offset = 50;
           public left = this.offset;
           public top = this.offset;
           public width = 400;
           public height = 350;
           public opened = true;
           public dataSaved = false;
       ...
   ```

2. Handle the [`dragEnd`](https://www.telerik.com/kendo-angular-ui/components/dialogs/api/windowcomponent#dragend) event and calculate the current `left` and `top` properties of the Window.

   ```ts
       public onEnd(){
           const windowWidth = window.innerWidth;
           const windowHeight = window.innerHeight;

           if(this.top < this.offset){
               this.top = this.offset;
           }

           if(this.top > (windowHeight - this.height - this.offset)){
           this.top = this.offset;
           }

           if(this.left < this.offset){
               this.left = this.offset;
           }

           if(this.left > (windowWidth - this.width - this.offset)){
               this.left = this.offset;
           }
       }
   ```

The following example demonstrates the full implementation of the suggested approach.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/knowledge-base/dynamically-reposition-window/source.txt)

## Suggested Links

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