Angular UI Components Documentation

Sets or gets the disabled property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDockPanel #myDockPanel  [width]="300" [height]="300" [disabled]="true">
            <div dock='left' style='background: #486974;'>
                First Div
            </div>
            <div dock='top' style='height: 100px; background: #368ba7;'>
                Second Div
            </div>
            <div dock='right' style='background: #df7169;'>
                Third Div
            </div>
            <div style='background: #a73654;'>
                Fourth Div
            </div>
        </jqxDockPanel>
    `
})
 
export class AppComponent {
    
}

Sets or gets the height property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDockPanel #myDockPanel  [width]="300" [height]="300">
            <div dock='left' style='background: #486974;'>
                First Div
            </div>
            <div dock='top' style='height: 100px; background: #368ba7;'>
                Second Div
            </div>
            <div dock='right' style='background: #df7169;'>
                Third Div
            </div>
            <div style='background: #a73654;'>
                Fourth Div
            </div>
        </jqxDockPanel>
    `
})
 
export class AppComponent {
    
}

Sets or gets the lastchildfill property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDockPanel #myDockPanel  [width]="300" [height]="300" [lastchildfill]="true">
            <div dock='left' style='background: #486974;'>
                First Div
            </div>
            <div dock='top' style='height: 100px; background: #368ba7;'>
                Second Div
            </div>
            <div dock='right' style='background: #df7169;'>
                Third Div
            </div>
            <div style='background: #a73654;'>
                Fourth Div
            </div>
        </jqxDockPanel>
    `
})
 
export class AppComponent {
    
}

Sets or gets the width property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDockPanel #myDockPanel  [width]="300" [height]="300">
            <div dock='left' style='background: #486974;'>
                First Div
            </div>
            <div dock='top' style='height: 100px; background: #368ba7;'>
                Second Div
            </div>
            <div dock='right' style='background: #df7169;'>
                Third Div
            </div>
            <div style='background: #a73654;'>
                Fourth Div
            </div>
        </jqxDockPanel>
    `
})
 
export class AppComponent {
    
}

Occurs when the layout is performed.

Code examples

Bind to the layout event of jqxDockPanel.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDockPanel #myDockPanel (onLayout)="Layout($event)" [width]="300" [height]="300">
            <div dock='left' style='background: #486974;'>
                First Div
            </div>
            <div dock='top' style='height: 100px; background: #368ba7;'>
                Second Div
            </div>
            <div dock='right' style='background: #df7169;'>
                Third Div
            </div>
            <div style='background: #a73654;'>
                Fourth Div
            </div>
        </jqxDockPanel>
    `
})
 
export class AppComponent {
    Layout(event: any): void 
    {
        // Do Something
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxDockPanel #myDockPanel  [width]="300" [height]="300">
            <div dock='left' style='background: #486974;'>
                First Div
            </div>
            <div dock='top' style='height: 100px; background: #368ba7;'>
                Second Div
            </div>
            <div dock='right' style='background: #df7169;'>
                Third Div
            </div>
            <div style='background: #a73654;'>
                Fourth Div
            </div>
        </jqxDockPanel>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myDockPanel') myDockPanel: jqxDockPanelComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myDockPanel.refresh();
    }

    
}