All Components

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.

import { Component } from '@angular/core';
import {
  WindowService,
  WindowRef,
  WindowCloseResult
} from '@progress/kendo-angular-dialog';

@Component({
  selector: 'my-app',
  template: `
    <div class="example-wrapper">
      <button (click)="openWindow()" class="k-button">Open Window</button>
    </div>

    <div kendoWindowContainer></div>
  `
})
export class AppComponent {
  constructor( private windowService: WindowService ) {}

  public openWindow() {
      const window: WindowRef = this.windowService.open({
          title: 'My Window',
          content: 'My Content!',
          width: 450,
          height: 200
      });

      window.result.subscribe((result) => {
          if (result instanceof WindowCloseResult) {
              console.log('Window was closed!');
          }
      });
  }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { WindowModule } from '@progress/kendo-angular-dialog';

@NgModule({
    bootstrap:    [ AppComponent ],
    declarations: [ AppComponent ],
    imports: [
      WindowModule,
      BrowserModule,
      BrowserAnimationsModule
    ]
})
export class AppModule {}
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

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 use of template expressions in its content area. To enable this behavior, pass a TemplateRef instance.

import { Component, TemplateRef } from '@angular/core';
import { WindowService, WindowCloseResult } from '@progress/kendo-angular-dialog';

@Component({
  selector: 'my-app',
  template: `
    <div class="example-wrapper">
      <ng-template #itemListRef>
          <p>Your list contains {{ items.length }} items:</p>

          <ul>
              <li *ngFor="let item of items">{{ item }}</li>
          </ul>
      </ng-template>

      <button (click)="showList(itemListRef)" class="k-button">Show my shopping list</button>
    </div>

    <div kendoWindowContainer></div>
  `
})
export class AppComponent {
  constructor( private windowService: WindowService ) {}

  public items = [ 'Apples', 'Juice', 'Eggs', 'Bread' ];

  public showList(template: TemplateRef) {
      this.windowService.open({
          title: 'My List',
          content: template,
          width: 250,
          height: 230
      });
  }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { WindowModule } from '@progress/kendo-angular-dialog';

@NgModule({
    bootstrap:    [ AppComponent ],
    declarations: [ AppComponent ],
    imports: [
      WindowModule,
      BrowserModule,
      BrowserAnimationsModule
    ]
})
export class AppModule {}
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

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.

import { Component } from '@angular/core';
import { UserInfoComponent } from './user-info.component';
import { WindowService, WindowCloseResult } from '@progress/kendo-angular-dialog';

@Component({
  selector: 'my-app',
  template: `
    <div class="example-wrapper">
      <button (click)="showWindow()" class="k-button k-button-icontext k-primary">
        <span class="k-icon k-i-delete"></span> Delete user
      </button>
    </div>

    <div kendoWindowContainer></div>
  `
})
export class AppComponent {
  constructor( private windowService: WindowService ) {}

  public showWindow() {
      const windowRef = this.windowService.open({
          title: 'Success!',
          content: UserInfoComponent,
          width: 250
      });

      const userInfo = windowRef.content.instance;
      userInfo.name = 'admin';
      userInfo.age = 42;
  }
}
import { Component, Input } from '@angular/core';

@Component({
  selector: 'user-info',
  template: `
    <div class="container-fluid">
      <p>The following person was deleted successfully!</p>
      <dl class="row">
          <dt class="col-sm-6">Username:</dt>
          <dd class="col-sm-6">{{ name }}</dd>

          <dt class="col-sm-6">Age:</dt>
          <dd class="col-sm-6">{{ age }}</dd>
      </dl>
    </div>
  `
})
export class UserInfoComponent {
    @Input() public name: string;

    @Input() public age: number;
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { UserInfoComponent } from './user-info.component';
import { WindowModule } from '@progress/kendo-angular-dialog';

@NgModule({
    bootstrap:       [ AppComponent ],
    declarations:    [ UserInfoComponent, AppComponent ],

    // Register the component that will be created dynamically
    entryComponents: [ UserInfoComponent ],

    imports: [
      WindowModule,
      BrowserModule,
      BrowserAnimationsModule
    ]
})
export class AppModule {}
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

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.

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

import { Component, TemplateRef } from '@angular/core';
import { WindowService, WindowCloseResult } from '@progress/kendo-angular-dialog';

@Component({
  selector: 'my-app',
  template: `
    <div class="example-wrapper">
      <ng-template #windowTitleBar let-win>
          <div class="k-window-title">Custom TitleBar</div>
          <button kendoWindowRestoreAction [window]="win"></button>
          <button kendoWindowMaximizeAction [window]="win"></button>
          <button kendoWindowCloseAction [window]="win"></button>
      </ng-template>

      <ng-template #windowContent>
          My templated content
      </ng-template>

      <button (click)="showList(windowContent, windowTitleBar)" class="k-button">Show my templated Window</button>
    </div>

    <div kendoWindowContainer></div>
  `
})
export class AppComponent {
  constructor( private windowService: WindowService ) {}

  public showList(content: TemplateRef<any>, titlebar: TemplateRef<any>) {
      this.windowService.open({
          content: content,
          titleBarContent: titlebar,
          width: 250,
          height: 200
      });
  }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { WindowModule } from '@progress/kendo-angular-dialog';

@NgModule({
    bootstrap:    [ AppComponent ],
    declarations: [ AppComponent ],
    imports: [
      WindowModule,
      BrowserModule,
      BrowserAnimationsModule
    ]
})
export class AppModule {}
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

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.

    <div kendoWindowContainer></div>
  • When you call the WindowService.open method, pass a ViewContainerRef instance to the appendTo property.

    import { Component, ViewChild, ViewContainerRef } from '@angular/core';
    
    import { WindowService } from '@progress/kendo-angular-dialog';
    
    @Component({
     selector: 'my-app',
     template: `
       <button kendoButton (click)="open()">Open window</button>
    
       <ng-container #container></ng-container>
     `
    })
    export class AppComponent {
     constructor(private windowService: WindowService) { }
    
     @ViewChild("container", { read: ViewContainerRef })
     public containerRef: ViewContainerRef;
    
     public open() {
       this.windowService.open({
         appendTo: this.containerRef,
         title: "My title",
         content: "My Content!"
       });
     }
    }
In this article