Angular UI Components Documentation

Sets or gets the autoOpen property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300" [autoOpen]="false">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent {
    
}

enum WindowAnimationType {
     none,
     fade,
     slide,
     combined
}

Sets or gets the animationType property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300" [animationType]="'slide'">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent {
    
}

Sets or gets the collapsed property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300" [collapsed]="true">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent {
    
}

Sets or gets the collapseAnimationDuration property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300" [collapseAnimationDuration]="3000">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent {
    
}

Sets or gets the content property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300" [content]="'New Content'">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent {
    
}

Sets or gets the closeAnimationDuration property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300" [closeAnimationDuration]="3000">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent {
    
}

Sets or gets the closeButtonSize property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300" [closeButtonSize]="20">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent {
    
}

enum WindowCloseButtonAction {
     hide,
     close
}

Sets or gets the closeButtonAction property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300" [closeButtonAction]="'close'">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent {
    
}

Sets or gets the cancelButton property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300" [cancelButton]="cancelButton">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent {
    
}

interface WindowDragArea {
     left: Number;
     top: Number;
     width: Number | String;
     height: Number | String;
}

Sets or gets the dragArea property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300" [dragArea]="dragArea">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent {
    
}

Sets or gets the draggable property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300" [draggable]="false">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent {
    
}

Sets or gets the disabled property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300" [disabled]="true">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent {
    
}

Sets or gets the height property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent {
    
}

Sets or gets the initContent property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300" [initContent]="initContent">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent {
    
}

Sets or gets the isModal property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300" [isModal]="true">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent {
    
}

Sets or gets the keyboardCloseKey property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300" [keyboardCloseKey]="32">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent {
    
}

Sets or gets the keyboardNavigation property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300" [keyboardNavigation]="false">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent {
    
}

Sets or gets the minHeight property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent {
    
}

Sets or gets the maxHeight property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent {
    
}

Sets or gets the minWidth property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300" [minWidth]="100">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent {
    
}

Sets or gets the maxWidth property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300" [maxWidth]="300">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent {
    
}

Sets or gets the modalOpacity property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300" [modalOpacity]="0.5">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent {
    
}

Sets or gets the modalZIndex property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300" [modalZIndex]="9999">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent {
    
}

Sets or gets the modalBackgroundZIndex property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300" [modalBackgroundZIndex]="9999">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent {
    
}

Sets or gets the okButton property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300" [okButton]="okButton">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent {
    
}

Sets or gets the position property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300" [position]="top,left">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent {
    
}

Sets or gets the rtl property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300" [rtl]="true">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent {
    
}

Sets or gets the resizable property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300" [resizable]="false">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent {
    
}

Sets or gets the showAnimationDuration property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300" [showAnimationDuration]="3000">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent {
    
}

Sets or gets the showCloseButton property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300" [showCloseButton]="false">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent {
    
}

Sets or gets the showCollapseButton property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300" [showCollapseButton]="true">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent {
    
}

Sets or gets the theme property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300" [theme]="'energyblue'">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent {
    
}

Sets or gets the title property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300" [title]="'Title'">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent {
    
}

Sets or gets the width property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent {
    
}

Sets or gets the zIndex property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300" [zIndex]="9999">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent {
    
}

This event is triggered when the window is closed.

Code examples

Bind to the close event of jqxWindow.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow(onClose)="Close($event)"
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent {
    Close(event: any): void 
    {
        // Do Something
    }

    
}
							
						

This event is triggered when the window is collapsed.

Code examples

Bind to the collapse event of jqxWindow.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow(onCollapse)="Collapse($event)"
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent {
    Collapse(event: any): void 
    {
        // Do Something
    }

    
}
							
						

This event is triggered when the user create new window.

Code examples

Bind to the created event of jqxWindow.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow(onCreated)="Created($event)"
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent {
    Created(event: any): void 
    {
        // Do Something
    }

    
}
							
						

This event is triggered when the window is expanded.

Code examples

Bind to the expand event of jqxWindow.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow(onExpand)="Expand($event)"
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent {
    Expand(event: any): void 
    {
        // Do Something
    }

    
}
							
						

This event is triggered when the window is dragging by the user.

Code examples

Bind to the moving event of jqxWindow.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow(onMoving)="Moving($event)"
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent {
    Moving(event: any): void 
    {
        // Do Something
    }

    
}
							
						

This event is triggered when the window is dropped by the user.

Code examples

Bind to the moved event of jqxWindow.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow(onMoved)="Moved($event)"
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent {
    Moved(event: any): void 
    {
        // Do Something
    }

    
}
							
						

This event is triggered when the window is displayed.

Code examples

Bind to the open event of jqxWindow.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow(onOpen)="Open($event)"
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent {
    Open(event: any): void 
    {
        // Do Something
    }

    
}
							
						

This event is triggered when the end-user is resizing the window.

Code examples

Bind to the resizing event of jqxWindow.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow(onResizing)="Resizing($event)"
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent {
    Resizing(event: any): void 
    {
        // Do Something
    }

    
}
							
						

This event is triggered when the end-user has resized the window.

Code examples

Bind to the resized event of jqxWindow.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow(onResized)="Resized($event)"
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent {
    Resized(event: any): void 
    {
        // Do Something
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myWindow') myWindow: jqxWindowComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myWindow.bringToFront();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myWindow') myWindow: jqxWindowComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myWindow.close();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myWindow') myWindow: jqxWindowComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myWindow.collapse();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myWindow') myWindow: jqxWindowComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myWindow.closeAll();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myWindow') myWindow: jqxWindowComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myWindow.disable();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myWindow') myWindow: jqxWindowComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myWindow.destroy();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myWindow') myWindow: jqxWindowComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myWindow.enable();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myWindow') myWindow: jqxWindowComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myWindow.expand();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myWindow') myWindow: jqxWindowComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myWindow.focus();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myWindow') myWindow: jqxWindowComponent; 
 
    ngAfterViewInit(): void 
    {
        let value = this.myWindow.isOpen();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myWindow') myWindow: jqxWindowComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myWindow.move();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myWindow') myWindow: jqxWindowComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myWindow.open();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myWindow') myWindow: jqxWindowComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myWindow.hide();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myWindow') myWindow: jqxWindowComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myWindow.resize();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myWindow') myWindow: jqxWindowComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myWindow.setTitle();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxWindow #myWindow
            [width]="500" [height]="400" [minHeight]="300" [minWidth]="300">
            <div>About 30 St Mary Axe</div>
            <div>
                <h3>30 St Mary Axe</h3>
                <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                <p>The building is on the former site of the Baltic Exchange building....</p>               
            </div>
        </jqxWindow>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myWindow') myWindow: jqxWindowComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myWindow.setContent();
    }

    
}