Angular UI Components Documentation

enum ExpanderAnimationType {
     none,
     slide,
     fade
}

Sets or gets the animationType property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxExpander #myExpander 
            [width]="350" [animationType]="'fade'">
            <div>
                Early History of the Internet
            </div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                    <li>1966 ARPANET planning starts</li>
                    <li>1969 ARPANET carries its first packets</li>
                </ul>
            </div>
        </jqxExpander>
    `
})
 
export class AppComponent {
    
}

enum ExpanderArrowPosition {
     left,
     right
}

Sets or gets the arrowPosition property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxExpander #myExpander 
            [width]="350" [arrowPosition]="'left'">
            <div>
                Early History of the Internet
            </div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                    <li>1966 ARPANET planning starts</li>
                    <li>1969 ARPANET carries its first packets</li>
                </ul>
            </div>
        </jqxExpander>
    `
})
 
export class AppComponent {
    
}

Sets or gets the collapseAnimationDuration property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxExpander #myExpander 
            [width]="350" [collapseAnimationDuration]="300">
            <div>
                Early History of the Internet
            </div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                    <li>1966 ARPANET planning starts</li>
                    <li>1969 ARPANET carries its first packets</li>
                </ul>
            </div>
        </jqxExpander>
    `
})
 
export class AppComponent {
    
}

Sets or gets the disabled property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxExpander #myExpander 
            [width]="350" [disabled]="true">
            <div>
                Early History of the Internet
            </div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                    <li>1966 ARPANET planning starts</li>
                    <li>1969 ARPANET carries its first packets</li>
                </ul>
            </div>
        </jqxExpander>
    `
})
 
export class AppComponent {
    
}

Sets or gets the expanded property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxExpander #myExpander 
            [width]="350" [expanded]="false">
            <div>
                Early History of the Internet
            </div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                    <li>1966 ARPANET planning starts</li>
                    <li>1969 ARPANET carries its first packets</li>
                </ul>
            </div>
        </jqxExpander>
    `
})
 
export class AppComponent {
    
}

Sets or gets the expandAnimationDuration property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxExpander #myExpander 
            [width]="350" [expandAnimationDuration]="300">
            <div>
                Early History of the Internet
            </div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                    <li>1966 ARPANET planning starts</li>
                    <li>1969 ARPANET carries its first packets</li>
                </ul>
            </div>
        </jqxExpander>
    `
})
 
export class AppComponent {
    
}

Sets or gets the height property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxExpander #myExpander 
            [width]="350" [height]="100">
            <div>
                Early History of the Internet
            </div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                    <li>1966 ARPANET planning starts</li>
                    <li>1969 ARPANET carries its first packets</li>
                </ul>
            </div>
        </jqxExpander>
    `
})
 
export class AppComponent {
    
}

enum ExpanderHeaderPosition {
     top,
     bottom
}

Sets or gets the headerPosition property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxExpander #myExpander 
            [width]="350" [headerPosition]="'bottom'">
            <div>
                Early History of the Internet
            </div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                    <li>1966 ARPANET planning starts</li>
                    <li>1969 ARPANET carries its first packets</li>
                </ul>
            </div>
        </jqxExpander>
    `
})
 
export class AppComponent {
    
}

Sets or gets the initContent property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxExpander #myExpander 
            [width]="350" [initContent]="initContent">
            <div>
                Early History of the Internet
            </div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                    <li>1966 ARPANET planning starts</li>
                    <li>1969 ARPANET carries its first packets</li>
                </ul>
            </div>
        </jqxExpander>
    `
})
 
export class AppComponent {
    
}

Sets or gets the rtl property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxExpander #myExpander 
            [width]="350" [rtl]="true">
            <div>
                Early History of the Internet
            </div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                    <li>1966 ARPANET planning starts</li>
                    <li>1969 ARPANET carries its first packets</li>
                </ul>
            </div>
        </jqxExpander>
    `
})
 
export class AppComponent {
    
}

Sets or gets the showArrow property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxExpander #myExpander 
            [width]="350" [showArrow]="true">
            <div>
                Early History of the Internet
            </div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                    <li>1966 ARPANET planning starts</li>
                    <li>1969 ARPANET carries its first packets</li>
                </ul>
            </div>
        </jqxExpander>
    `
})
 
export class AppComponent {
    
}

Sets or gets the theme property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxExpander #myExpander 
            [width]="350" [theme]="'energyblue'">
            <div>
                Early History of the Internet
            </div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                    <li>1966 ARPANET planning starts</li>
                    <li>1969 ARPANET carries its first packets</li>
                </ul>
            </div>
        </jqxExpander>
    `
})
 
export class AppComponent {
    
}

enum ExpanderToggleMode {
     click,
     dblclick,
     none
}

Sets or gets the toggleMode property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxExpander #myExpander 
            [width]="350" [toggleMode]="'none'">
            <div>
                Early History of the Internet
            </div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                    <li>1966 ARPANET planning starts</li>
                    <li>1969 ARPANET carries its first packets</li>
                </ul>
            </div>
        </jqxExpander>
    `
})
 
export class AppComponent {
    
}

Sets or gets the width property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxExpander #myExpander 
            [width]="350" [width]="300">
            <div>
                Early History of the Internet
            </div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                    <li>1966 ARPANET planning starts</li>
                    <li>1969 ARPANET carries its first packets</li>
                </ul>
            </div>
        </jqxExpander>
    `
})
 
export class AppComponent {
    
}

This event is triggered when the jqxExpander is going to be collapsed.

Code examples

Bind to the collapsing event of jqxExpander.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxExpander #myExpander (onCollapsing)="Collapsing($event)"
            [width]="350">
            <div>
                Early History of the Internet
            </div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                    <li>1966 ARPANET planning starts</li>
                    <li>1969 ARPANET carries its first packets</li>
                </ul>
            </div>
        </jqxExpander>
    `
})
 
export class AppComponent {
    Collapsing(event: any): void 
    {
        // Do Something
    }

    
}
							
						

This event is triggered when the jqxExpander is collapsed.

Code examples

Bind to the collapsed event of jqxExpander.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxExpander #myExpander (onCollapsed)="Collapsed($event)"
            [width]="350">
            <div>
                Early History of the Internet
            </div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                    <li>1966 ARPANET planning starts</li>
                    <li>1969 ARPANET carries its first packets</li>
                </ul>
            </div>
        </jqxExpander>
    `
})
 
export class AppComponent {
    Collapsed(event: any): void 
    {
        // Do Something
    }

    
}
							
						

This event is triggered when the jqxExpander is going to be expanded.

Code examples

Bind to the expanding event of jqxExpander.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxExpander #myExpander (onExpanding)="Expanding($event)"
            [width]="350">
            <div>
                Early History of the Internet
            </div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                    <li>1966 ARPANET planning starts</li>
                    <li>1969 ARPANET carries its first packets</li>
                </ul>
            </div>
        </jqxExpander>
    `
})
 
export class AppComponent {
    Expanding(event: any): void 
    {
        // Do Something
    }

    
}
							
						

This event is triggered when the jqxExpander is expanded.

Code examples

Bind to the expanded event of jqxExpander.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxExpander #myExpander (onExpanded)="Expanded($event)"
            [width]="350">
            <div>
                Early History of the Internet
            </div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                    <li>1966 ARPANET planning starts</li>
                    <li>1969 ARPANET carries its first packets</li>
                </ul>
            </div>
        </jqxExpander>
    `
})
 
export class AppComponent {
    Expanded(event: any): void 
    {
        // Do Something
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxExpander #myExpander 
            [width]="350">
            <div>
                Early History of the Internet
            </div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                    <li>1966 ARPANET planning starts</li>
                    <li>1969 ARPANET carries its first packets</li>
                </ul>
            </div>
        </jqxExpander>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myExpander') myExpander: jqxExpanderComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myExpander.collapse();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxExpander #myExpander 
            [width]="350">
            <div>
                Early History of the Internet
            </div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                    <li>1966 ARPANET planning starts</li>
                    <li>1969 ARPANET carries its first packets</li>
                </ul>
            </div>
        </jqxExpander>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myExpander') myExpander: jqxExpanderComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myExpander.disable();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxExpander #myExpander 
            [width]="350">
            <div>
                Early History of the Internet
            </div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                    <li>1966 ARPANET planning starts</li>
                    <li>1969 ARPANET carries its first packets</li>
                </ul>
            </div>
        </jqxExpander>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myExpander') myExpander: jqxExpanderComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myExpander.destroy();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxExpander #myExpander 
            [width]="350">
            <div>
                Early History of the Internet
            </div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                    <li>1966 ARPANET planning starts</li>
                    <li>1969 ARPANET carries its first packets</li>
                </ul>
            </div>
        </jqxExpander>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myExpander') myExpander: jqxExpanderComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myExpander.enable();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxExpander #myExpander 
            [width]="350">
            <div>
                Early History of the Internet
            </div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                    <li>1966 ARPANET planning starts</li>
                    <li>1969 ARPANET carries its first packets</li>
                </ul>
            </div>
        </jqxExpander>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myExpander') myExpander: jqxExpanderComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myExpander.expand();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxExpander #myExpander 
            [width]="350">
            <div>
                Early History of the Internet
            </div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                    <li>1966 ARPANET planning starts</li>
                    <li>1969 ARPANET carries its first packets</li>
                </ul>
            </div>
        </jqxExpander>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myExpander') myExpander: jqxExpanderComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myExpander.focus();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxExpander #myExpander 
            [width]="350">
            <div>
                Early History of the Internet
            </div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                    <li>1966 ARPANET planning starts</li>
                    <li>1969 ARPANET carries its first packets</li>
                </ul>
            </div>
        </jqxExpander>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myExpander') myExpander: jqxExpanderComponent; 
 
    ngAfterViewInit(): void 
    {
        let value = this.myExpander.getContent();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxExpander #myExpander 
            [width]="350">
            <div>
                Early History of the Internet
            </div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                    <li>1966 ARPANET planning starts</li>
                    <li>1969 ARPANET carries its first packets</li>
                </ul>
            </div>
        </jqxExpander>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myExpander') myExpander: jqxExpanderComponent; 
 
    ngAfterViewInit(): void 
    {
        let value = this.myExpander.getHeaderContent();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxExpander #myExpander 
            [width]="350">
            <div>
                Early History of the Internet
            </div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                    <li>1966 ARPANET planning starts</li>
                    <li>1969 ARPANET carries its first packets</li>
                </ul>
            </div>
        </jqxExpander>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myExpander') myExpander: jqxExpanderComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myExpander.invalidate();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxExpander #myExpander 
            [width]="350">
            <div>
                Early History of the Internet
            </div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                    <li>1966 ARPANET planning starts</li>
                    <li>1969 ARPANET carries its first packets</li>
                </ul>
            </div>
        </jqxExpander>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myExpander') myExpander: jqxExpanderComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myExpander.refresh();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxExpander #myExpander 
            [width]="350">
            <div>
                Early History of the Internet
            </div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                    <li>1966 ARPANET planning starts</li>
                    <li>1969 ARPANET carries its first packets</li>
                </ul>
            </div>
        </jqxExpander>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myExpander') myExpander: jqxExpanderComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myExpander.render();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxExpander #myExpander 
            [width]="350">
            <div>
                Early History of the Internet
            </div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                    <li>1966 ARPANET planning starts</li>
                    <li>1969 ARPANET carries its first packets</li>
                </ul>
            </div>
        </jqxExpander>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myExpander') myExpander: jqxExpanderComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myExpander.setHeaderContent('header');
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxExpander #myExpander 
            [width]="350">
            <div>
                Early History of the Internet
            </div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                    <li>1966 ARPANET planning starts</li>
                    <li>1969 ARPANET carries its first packets</li>
                </ul>
            </div>
        </jqxExpander>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myExpander') myExpander: jqxExpanderComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myExpander.setContent('content');
    }

    
}