Angular UI Components Documentation

enum TabsAnimationType {
     none,
     fade
}

Sets or gets the animationType property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs
            [width]='"90%"' [height]='200' [position]='"top"' [animationType]="'fade'">
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent {
    
}

Sets or gets the autoHeight property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs
            [width]='"90%"' [height]='200' [position]='"top"' [autoHeight]="true">
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent {
    
}

Sets or gets the closeButtonSize property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs
            [width]='"90%"' [height]='200' [position]='"top"' [closeButtonSize]="20">
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent {
    
}

Sets or gets the collapsible property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs
            [width]='"90%"' [height]='200' [position]='"top"' [collapsible]="true">
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent {
    
}

Sets or gets the contentTransitionDuration property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs
            [width]='"90%"' [height]='200' [position]='"top"' [contentTransitionDuration]="300">
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent {
    
}

Sets or gets the disabled property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs
            [width]='"90%"' [height]='200' [position]='"top"' [disabled]="true">
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent {
    
}

Sets or gets the enabledHover property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs
            [width]='"90%"' [height]='200' [position]='"top"' [enabledHover]="true">
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent {
    
}

Sets or gets the enableScrollAnimation property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs
            [width]='"90%"' [height]='200' [position]='"top"' [enableScrollAnimation]="true">
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent {
    
}

Sets or gets the enableDropAnimation property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs
            [width]='"90%"' [height]='200' [position]='"top"' [enableScrollAnimation]="true">
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent {
    
}

Sets or gets the height property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs
            [width]='"90%"' [height]='200' [position]='"top"'>
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent {
    
}

Sets or gets the initTabContent property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs
            [width]='"90%"' [height]='200' [position]='"top"' [initTabContent]="initTabContent">
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent {
    
}

Sets or gets the keyboardNavigation property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs
            [width]='"90%"' [height]='200' [position]='"top"' [keyboardNavigation]="false">
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent {
    
}

Sets or gets the next property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs
            [width]='"90%"' [height]='200' [position]='"top"' [next]="next">
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent {
    
}

Sets or gets the previous property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs
            [width]='"90%"' [height]='200' [position]='"top"' [previous]="previous">
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent {
    
}

enum TabsPosition {
     top,
     bottom
}

Sets or gets the position property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs
            [width]='"90%"' [height]='200' [position]='"top"'>
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent {
    
}

Sets or gets the reorder property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs
            [width]='"90%"' [height]='200' [position]='"top"' [reorder]="true">
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent {
    
}

Sets or gets the rtl property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs
            [width]='"90%"' [height]='200' [position]='"top"' [rtl]="true">
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent {
    
}

Sets or gets the scrollAnimationDuration property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs
            [width]='"90%"' [height]='200' [position]='"top"' [scrollAnimationDuration]="3000">
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent {
    
}

Sets or gets the selectedItem property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs
            [width]='"90%"' [height]='200' [position]='"top"' [selectedItem]="1">
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent {
    
}

Sets or gets the selectionTracker property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs
            [width]='"90%"' [height]='200' [position]='"top"' [selectionTracker]="true">
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent {
    
}

Sets or gets the scrollable property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs
            [width]='"90%"' [height]='200' [position]='"top"' [scrollable]="true">
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent {
    
}

enum TabsScrollPosition {
     left,
     right,
     both
}

Sets or gets the scrollPosition property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs
            [width]='"90%"' [height]='200' [position]='"top"' [scrollPosition]="'both'">
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent {
    
}

Sets or gets the scrollStep property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs
            [width]='"90%"' [height]='200' [position]='"top"' [scrollStep]="100">
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent {
    
}

Sets or gets the showCloseButtons property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs
            [width]='"90%"' [height]='200' [position]='"top"' [showCloseButtons]="true">
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent {
    
}

enum TabsToggleMode {
     click,
     dblclick,
     mouseenter,
     none
}

Sets or gets the toggleMode property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs
            [width]='"90%"' [height]='200' [position]='"top"' [toggleMode]="'dlclick'">
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent {
    
}

Sets or gets the theme property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs
            [width]='"90%"' [height]='200' [position]='"top"' [theme]="'energyblue'">
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent {
    
}

Sets or gets the width property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs
            [width]='"90%"' [height]='200' [position]='"top"'>
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent {
    
}

This event is triggered when a new tab is added to the jqxTabs.

Code examples

Bind to the add event of jqxTabs.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs(onAdd)="Add($event)"
            [width]='"90%"' [height]='200' [position]='"top"'>
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent {
    Add(event: any): void 
    {
        // Do Something
    }

    
}
							
						

This event is triggered when the jqxTabs is created. You should subscribe to this event before the jqxTabs initialization.

Code examples

Bind to the created event of jqxTabs.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs(onCreated)="Created($event)"
            [width]='"90%"' [height]='200' [position]='"top"'>
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent {
    Created(event: any): void 
    {
        // Do Something
    }

    
}
							
						

Theis event is triggered when any tab is collapsed.

Code examples

Bind to the collapsed event of jqxTabs.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs(onCollapsed)="Collapsed($event)"
            [width]='"90%"' [height]='200' [position]='"top"'>
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent {
    Collapsed(event: any): void 
    {
        // Do Something
    }

    
}
							
						

This event is triggered when the drag operation started.

Code examples

Bind to the dragStart event of jqxTabs.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs(onDragStart)="DragStart($event)"
            [width]='"90%"' [height]='200' [position]='"top"'>
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent {
    DragStart(event: any): void 
    {
        // Do Something
    }

    
}
							
						

This event is triggered when the drag operation ended.

Code examples

Bind to the dragEnd event of jqxTabs.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs(onDragEnd)="DragEnd($event)"
            [width]='"90%"' [height]='200' [position]='"top"'>
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent {
    DragEnd(event: any): void 
    {
        // Do Something
    }

    
}
							
						

This event is triggered when any tab is expanded.

Code examples

Bind to the expanded event of jqxTabs.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs(onExpanded)="Expanded($event)"
            [width]='"90%"' [height]='200' [position]='"top"'>
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent {
    Expanded(event: any): void 
    {
        // Do Something
    }

    
}
							
						

This event is triggered when a tab is removed.

Code examples

Bind to the removed event of jqxTabs.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs(onRemoved)="Removed($event)"
            [width]='"90%"' [height]='200' [position]='"top"'>
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent {
    Removed(event: any): void 
    {
        // Do Something
    }

    
}
							
						

This event is triggered when the user selects a tab. This event is cancelable. You can cancel the selection by setting the 'event.cancel = true' in the event callback.

Code examples

Bind to the selecting event of jqxTabs.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs(onSelecting)="Selecting($event)"
            [width]='"90%"' [height]='200' [position]='"top"'>
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent {
    Selecting(event: any): void 
    {
        // Do Something
    }

    
}
							
						

This event is triggered when the user selects a new tab.

Code examples

Bind to the selected event of jqxTabs.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs(onSelected)="Selected($event)"
            [width]='"90%"' [height]='200' [position]='"top"'>
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent {
    Selected(event: any): void 
    {
        // Do Something
    }

    
}
							
						

This event is triggered when the user click a tab. You can retrieve the clicked tab's index.

Code examples

Bind to the tabclick event of jqxTabs.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs(onTabclick)="Tabclick($event)"
            [width]='"90%"' [height]='200' [position]='"top"'>
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent {
    Tabclick(event: any): void 
    {
        // Do Something
    }

    
}
							
						

This event is triggered when the user selects a tab. The last selected tab is going to become unselected. This event is cancelable. You can cancel the selection by setting the 'event.cancel = true' in the event callback.

Code examples

Bind to the unselecting event of jqxTabs.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs(onUnselecting)="Unselecting($event)"
            [width]='"90%"' [height]='200' [position]='"top"'>
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent {
    Unselecting(event: any): void 
    {
        // Do Something
    }

    
}
							
						

This event is triggered when the user selects a tab. The last selected tab becomes unselected.

Code examples

Bind to the unselected event of jqxTabs.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs(onUnselected)="Unselected($event)"
            [width]='"90%"' [height]='200' [position]='"top"'>
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent {
    Unselected(event: any): void 
    {
        // Do Something
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs
            [width]='"90%"' [height]='200' [position]='"top"'>
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myTabs') myTabs: jqxTabsComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myTabs.addAt(1,'Title','Content');
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs
            [width]='"90%"' [height]='200' [position]='"top"'>
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myTabs') myTabs: jqxTabsComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myTabs.addFirst();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs
            [width]='"90%"' [height]='200' [position]='"top"'>
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myTabs') myTabs: jqxTabsComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myTabs.addLast();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs
            [width]='"90%"' [height]='200' [position]='"top"'>
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myTabs') myTabs: jqxTabsComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myTabs.collapse();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs
            [width]='"90%"' [height]='200' [position]='"top"'>
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myTabs') myTabs: jqxTabsComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myTabs.disable();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs
            [width]='"90%"' [height]='200' [position]='"top"'>
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myTabs') myTabs: jqxTabsComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myTabs.disableAt(1);
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs
            [width]='"90%"' [height]='200' [position]='"top"'>
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myTabs') myTabs: jqxTabsComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myTabs.destroy();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs
            [width]='"90%"' [height]='200' [position]='"top"'>
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myTabs') myTabs: jqxTabsComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myTabs.ensureVisible(1);
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs
            [width]='"90%"' [height]='200' [position]='"top"'>
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myTabs') myTabs: jqxTabsComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myTabs.enableAt(1);
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs
            [width]='"90%"' [height]='200' [position]='"top"'>
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myTabs') myTabs: jqxTabsComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myTabs.expand();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs
            [width]='"90%"' [height]='200' [position]='"top"'>
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myTabs') myTabs: jqxTabsComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myTabs.enable();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs
            [width]='"90%"' [height]='200' [position]='"top"'>
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myTabs') myTabs: jqxTabsComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myTabs.focus();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs
            [width]='"90%"' [height]='200' [position]='"top"'>
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myTabs') myTabs: jqxTabsComponent; 
 
    ngAfterViewInit(): void 
    {
        let value = this.myTabs.getTitleAt(1);
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs
            [width]='"90%"' [height]='200' [position]='"top"'>
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myTabs') myTabs: jqxTabsComponent; 
 
    ngAfterViewInit(): void 
    {
        let value = this.myTabs.getContentAt(1);
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs
            [width]='"90%"' [height]='200' [position]='"top"'>
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myTabs') myTabs: jqxTabsComponent; 
 
    ngAfterViewInit(): void 
    {
        let value = this.myTabs.getDisabledTabsCount();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs
            [width]='"90%"' [height]='200' [position]='"top"'>
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myTabs') myTabs: jqxTabsComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myTabs.hideCloseButtonAt(1);
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs
            [width]='"90%"' [height]='200' [position]='"top"'>
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myTabs') myTabs: jqxTabsComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myTabs.hideAllCloseButtons();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs
            [width]='"90%"' [height]='200' [position]='"top"'>
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myTabs') myTabs: jqxTabsComponent; 
 
    ngAfterViewInit(): void 
    {
        let value = this.myTabs.length();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs
            [width]='"90%"' [height]='200' [position]='"top"'>
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myTabs') myTabs: jqxTabsComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myTabs.removeAt(1);
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs
            [width]='"90%"' [height]='200' [position]='"top"'>
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myTabs') myTabs: jqxTabsComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myTabs.removeFirst();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs
            [width]='"90%"' [height]='200' [position]='"top"'>
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myTabs') myTabs: jqxTabsComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myTabs.removeLast();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs
            [width]='"90%"' [height]='200' [position]='"top"'>
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myTabs') myTabs: jqxTabsComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myTabs.select(1);
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs
            [width]='"90%"' [height]='200' [position]='"top"'>
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myTabs') myTabs: jqxTabsComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myTabs.setContentAt(1,document.createElement('label'));
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs
            [width]='"90%"' [height]='200' [position]='"top"'>
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myTabs') myTabs: jqxTabsComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myTabs.setTitleAt(1,'Title 1');
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs
            [width]='"90%"' [height]='200' [position]='"top"'>
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myTabs') myTabs: jqxTabsComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myTabs.showCloseButtonAt(1);
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs
            [width]='"90%"' [height]='200' [position]='"top"'>
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myTabs') myTabs: jqxTabsComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myTabs.showAllCloseButtons();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTabs #myTabs
            [width]='"90%"' [height]='200' [position]='"top"'>
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
            <div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
            <div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
            <div>Python is a general-purpose, high-level programming language[5] whose design....</div>
            <div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
        </jqxTabs>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myTabs') myTabs: jqxTabsComponent; 
 
    ngAfterViewInit(): void 
    {
        let value = this.myTabs.val();
    }

    
}