Properties

NameTypeDefault
animationType enum:NavigationBarAnimationType 'slide'
enum NavigationBarAnimationType {
     none,
     slide,
     fade
}

Sets or gets the animationType property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNavigationBar #myNavigationBar 
            [width]="400" [height]="300" [animationType]="'fade'">
            <div>Early History of the Internet</div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                </ul>
            </div>
            <div>Merging the networks and creating the Internet</div>
            <div>
                <ul>
                    <li>1981 Computer Science Network (CSNET)</li>
                    <li>1982 TCP/IP protocol suite formalized</li>
                </ul>
            </div>
            <div>Popular Internet services</div>
            <div>
                <ul>
                    <li>1990 IMDb Internet movie database</li>
                    <li>1995 Amazon.com online retailer</li>
                </ul>
            </div>
        </jqxNavigationBar>
    `
})
 
export class AppComponent {
    
}
arrowPosition enum:NavigationBarArrowPosition 'right'
enum NavigationBarArrowPosition {
     left,
     right
}

Sets or gets the arrowPosition property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNavigationBar #myNavigationBar 
            [width]="400" [height]="300" [arrowPosition]="'left'">
            <div>Early History of the Internet</div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                </ul>
            </div>
            <div>Merging the networks and creating the Internet</div>
            <div>
                <ul>
                    <li>1981 Computer Science Network (CSNET)</li>
                    <li>1982 TCP/IP protocol suite formalized</li>
                </ul>
            </div>
            <div>Popular Internet services</div>
            <div>
                <ul>
                    <li>1990 IMDb Internet movie database</li>
                    <li>1995 Amazon.com online retailer</li>
                </ul>
            </div>
        </jqxNavigationBar>
    `
})
 
export class AppComponent {
    
}
collapseAnimationDuration Number 400

Sets or gets the collapseAnimationDuration property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNavigationBar #myNavigationBar 
            [width]="400" [height]="300" [collapseAnimationDuration]="3000">
            <div>Early History of the Internet</div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                </ul>
            </div>
            <div>Merging the networks and creating the Internet</div>
            <div>
                <ul>
                    <li>1981 Computer Science Network (CSNET)</li>
                    <li>1982 TCP/IP protocol suite formalized</li>
                </ul>
            </div>
            <div>Popular Internet services</div>
            <div>
                <ul>
                    <li>1990 IMDb Internet movie database</li>
                    <li>1995 Amazon.com online retailer</li>
                </ul>
            </div>
        </jqxNavigationBar>
    `
})
 
export class AppComponent {
    
}
disabled Boolean false

Sets or gets the disabled property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNavigationBar #myNavigationBar 
            [width]="400" [height]="300" [disabled]="true">
            <div>Early History of the Internet</div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                </ul>
            </div>
            <div>Merging the networks and creating the Internet</div>
            <div>
                <ul>
                    <li>1981 Computer Science Network (CSNET)</li>
                    <li>1982 TCP/IP protocol suite formalized</li>
                </ul>
            </div>
            <div>Popular Internet services</div>
            <div>
                <ul>
                    <li>1990 IMDb Internet movie database</li>
                    <li>1995 Amazon.com online retailer</li>
                </ul>
            </div>
        </jqxNavigationBar>
    `
})
 
export class AppComponent {
    
}
expandAnimationDuration Number 400

Sets or gets the expandAnimationDuration property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNavigationBar #myNavigationBar 
            [width]="400" [height]="300" [expandAnimationDuration]="3000">
            <div>Early History of the Internet</div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                </ul>
            </div>
            <div>Merging the networks and creating the Internet</div>
            <div>
                <ul>
                    <li>1981 Computer Science Network (CSNET)</li>
                    <li>1982 TCP/IP protocol suite formalized</li>
                </ul>
            </div>
            <div>Popular Internet services</div>
            <div>
                <ul>
                    <li>1990 IMDb Internet movie database</li>
                    <li>1995 Amazon.com online retailer</li>
                </ul>
            </div>
        </jqxNavigationBar>
    `
})
 
export class AppComponent {
    
}
expandMode enum:NavigationBarExpandMode 'singleFitHeight'
enum NavigationBarExpandMode {
     single,
     singleFitHeight,
     multiple,
     toggle,
     none
}

Sets or gets the expandMode property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNavigationBar #myNavigationBar 
            [width]="400" [height]="300" [expandMode]="'single'">
            <div>Early History of the Internet</div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                </ul>
            </div>
            <div>Merging the networks and creating the Internet</div>
            <div>
                <ul>
                    <li>1981 Computer Science Network (CSNET)</li>
                    <li>1982 TCP/IP protocol suite formalized</li>
                </ul>
            </div>
            <div>Popular Internet services</div>
            <div>
                <ul>
                    <li>1990 IMDb Internet movie database</li>
                    <li>1995 Amazon.com online retailer</li>
                </ul>
            </div>
        </jqxNavigationBar>
    `
})
 
export class AppComponent {
    
}
expandedIndexes Array<Number> []

Sets or gets the expandedIndexes property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNavigationBar #myNavigationBar 
            [width]="400" [height]="300" [expandedIndexes]='[0, 1]'>
            <div>Early History of the Internet</div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                </ul>
            </div>
            <div>Merging the networks and creating the Internet</div>
            <div>
                <ul>
                    <li>1981 Computer Science Network (CSNET)</li>
                    <li>1982 TCP/IP protocol suite formalized</li>
                </ul>
            </div>
            <div>Popular Internet services</div>
            <div>
                <ul>
                    <li>1990 IMDb Internet movie database</li>
                    <li>1995 Amazon.com online retailer</li>
                </ul>
            </div>
        </jqxNavigationBar>
    `
})
 
export class AppComponent {
    
}
height String | Number 'auto'

Sets or gets the height property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNavigationBar #myNavigationBar 
            [width]="400" [height]="300">
            <div>Early History of the Internet</div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                </ul>
            </div>
            <div>Merging the networks and creating the Internet</div>
            <div>
                <ul>
                    <li>1981 Computer Science Network (CSNET)</li>
                    <li>1982 TCP/IP protocol suite formalized</li>
                </ul>
            </div>
            <div>Popular Internet services</div>
            <div>
                <ul>
                    <li>1990 IMDb Internet movie database</li>
                    <li>1995 Amazon.com online retailer</li>
                </ul>
            </div>
        </jqxNavigationBar>
    `
})
 
export class AppComponent {
    
}
initContent (index:Number) => Void null

Sets or gets the initContent property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNavigationBar #myNavigationBar 
            [width]="400" [height]="300" [initContent]="initContent">
            <div>Early History of the Internet</div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                </ul>
            </div>
            <div>Merging the networks and creating the Internet</div>
            <div>
                <ul>
                    <li>1981 Computer Science Network (CSNET)</li>
                    <li>1982 TCP/IP protocol suite formalized</li>
                </ul>
            </div>
            <div>Popular Internet services</div>
            <div>
                <ul>
                    <li>1990 IMDb Internet movie database</li>
                    <li>1995 Amazon.com online retailer</li>
                </ul>
            </div>
        </jqxNavigationBar>
    `
})
 
export class AppComponent {
    
}
rtl Boolean false

Sets or gets the rtl property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNavigationBar #myNavigationBar 
            [width]="400" [height]="300" [rtl]="true">
            <div>Early History of the Internet</div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                </ul>
            </div>
            <div>Merging the networks and creating the Internet</div>
            <div>
                <ul>
                    <li>1981 Computer Science Network (CSNET)</li>
                    <li>1982 TCP/IP protocol suite formalized</li>
                </ul>
            </div>
            <div>Popular Internet services</div>
            <div>
                <ul>
                    <li>1990 IMDb Internet movie database</li>
                    <li>1995 Amazon.com online retailer</li>
                </ul>
            </div>
        </jqxNavigationBar>
    `
})
 
export class AppComponent {
    
}
showArrow Boolean true

Sets or gets the showArrow property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNavigationBar #myNavigationBar 
            [width]="400" [height]="300" [showArrow]="false">
            <div>Early History of the Internet</div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                </ul>
            </div>
            <div>Merging the networks and creating the Internet</div>
            <div>
                <ul>
                    <li>1981 Computer Science Network (CSNET)</li>
                    <li>1982 TCP/IP protocol suite formalized</li>
                </ul>
            </div>
            <div>Popular Internet services</div>
            <div>
                <ul>
                    <li>1990 IMDb Internet movie database</li>
                    <li>1995 Amazon.com online retailer</li>
                </ul>
            </div>
        </jqxNavigationBar>
    `
})
 
export class AppComponent {
    
}
theme String ''

Sets or gets the theme property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNavigationBar #myNavigationBar 
            [width]="400" [height]="300" [theme]="'energyblue'">
            <div>Early History of the Internet</div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                </ul>
            </div>
            <div>Merging the networks and creating the Internet</div>
            <div>
                <ul>
                    <li>1981 Computer Science Network (CSNET)</li>
                    <li>1982 TCP/IP protocol suite formalized</li>
                </ul>
            </div>
            <div>Popular Internet services</div>
            <div>
                <ul>
                    <li>1990 IMDb Internet movie database</li>
                    <li>1995 Amazon.com online retailer</li>
                </ul>
            </div>
        </jqxNavigationBar>
    `
})
 
export class AppComponent {
    
}
toggleMode enum:NavigationBarToggleMode click
enum NavigationBarToggleMode {
     click,
     dblclick,
     none
}

Sets or gets the toggleMode property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNavigationBar #myNavigationBar 
            [width]="400" [height]="300" [toggleMode]="'dblclick'">
            <div>Early History of the Internet</div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                </ul>
            </div>
            <div>Merging the networks and creating the Internet</div>
            <div>
                <ul>
                    <li>1981 Computer Science Network (CSNET)</li>
                    <li>1982 TCP/IP protocol suite formalized</li>
                </ul>
            </div>
            <div>Popular Internet services</div>
            <div>
                <ul>
                    <li>1990 IMDb Internet movie database</li>
                    <li>1995 Amazon.com online retailer</li>
                </ul>
            </div>
        </jqxNavigationBar>
    `
})
 
export class AppComponent {
    
}
width String | Number 'auto'

Sets or gets the width property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNavigationBar #myNavigationBar 
            [width]="400" [height]="300">
            <div>Early History of the Internet</div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                </ul>
            </div>
            <div>Merging the networks and creating the Internet</div>
            <div>
                <ul>
                    <li>1981 Computer Science Network (CSNET)</li>
                    <li>1982 TCP/IP protocol suite formalized</li>
                </ul>
            </div>
            <div>Popular Internet services</div>
            <div>
                <ul>
                    <li>1990 IMDb Internet movie database</li>
                    <li>1995 Amazon.com online retailer</li>
                </ul>
            </div>
        </jqxNavigationBar>
    `
})
 
export class AppComponent {
    
}

Events

collapsingItem Event

This event is triggered when a jqxNavigationBar item is going to be collapsed.

Code examples

Bind to the collapsingItem event of jqxNavigationBar. 

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNavigationBar #myNavigationBar (onCollapsingItem)="CollapsingItem($event)"
            [width]="400" [height]="300">
            <div>Early History of the Internet</div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                </ul>
            </div>
            <div>Merging the networks and creating the Internet</div>
            <div>
                <ul>
                    <li>1981 Computer Science Network (CSNET)</li>
                    <li>1982 TCP/IP protocol suite formalized</li>
                </ul>
            </div>
            <div>Popular Internet services</div>
            <div>
                <ul>
                    <li>1990 IMDb Internet movie database</li>
                    <li>1995 Amazon.com online retailer</li>
                </ul>
            </div>
        </jqxNavigationBar>
    `
})
 
export class AppComponent {
    CollapsingItem(event: any): void 
    {
        // Do Something
    }

    
}
collapsedItem Event

This event is triggered when a jqxNavigationBar item is collapsed.

Code examples

Bind to the collapsedItem event of jqxNavigationBar. 

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNavigationBar #myNavigationBar (onCollapsedItem)="CollapsedItem($event)"
            [width]="400" [height]="300">
            <div>Early History of the Internet</div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                </ul>
            </div>
            <div>Merging the networks and creating the Internet</div>
            <div>
                <ul>
                    <li>1981 Computer Science Network (CSNET)</li>
                    <li>1982 TCP/IP protocol suite formalized</li>
                </ul>
            </div>
            <div>Popular Internet services</div>
            <div>
                <ul>
                    <li>1990 IMDb Internet movie database</li>
                    <li>1995 Amazon.com online retailer</li>
                </ul>
            </div>
        </jqxNavigationBar>
    `
})
 
export class AppComponent {
    CollapsedItem(event: any): void 
    {
        // Do Something
    }

    
}
expandingItem Event

This event is triggered when a jqxNavigationBar item is going to be expanded.

Code examples

Bind to the expandingItem event of jqxNavigationBar. 

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNavigationBar #myNavigationBar (onExpandingItem)="ExpandingItem($event)"
            [width]="400" [height]="300">
            <div>Early History of the Internet</div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                </ul>
            </div>
            <div>Merging the networks and creating the Internet</div>
            <div>
                <ul>
                    <li>1981 Computer Science Network (CSNET)</li>
                    <li>1982 TCP/IP protocol suite formalized</li>
                </ul>
            </div>
            <div>Popular Internet services</div>
            <div>
                <ul>
                    <li>1990 IMDb Internet movie database</li>
                    <li>1995 Amazon.com online retailer</li>
                </ul>
            </div>
        </jqxNavigationBar>
    `
})
 
export class AppComponent {
    ExpandingItem(event: any): void 
    {
        // Do Something
    }

    
}
expandedItem Event

This event is triggered when a jqxNavigationBar item is expanded.

Code examples

Bind to the expandedItem event of jqxNavigationBar. 

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNavigationBar #myNavigationBar (onExpandedItem)="ExpandedItem($event)"
            [width]="400" [height]="300">
            <div>Early History of the Internet</div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                </ul>
            </div>
            <div>Merging the networks and creating the Internet</div>
            <div>
                <ul>
                    <li>1981 Computer Science Network (CSNET)</li>
                    <li>1982 TCP/IP protocol suite formalized</li>
                </ul>
            </div>
            <div>Popular Internet services</div>
            <div>
                <ul>
                    <li>1990 IMDb Internet movie database</li>
                    <li>1995 Amazon.com online retailer</li>
                </ul>
            </div>
        </jqxNavigationBar>
    `
})
 
export class AppComponent {
    ExpandedItem(event: any): void 
    {
        // Do Something
    }

    
}

Methods

NameReturn TypeArguments
add Void header: String | Number,
content: String | Number 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNavigationBar #myNavigationBar 
            [width]="400" [height]="300">
            <div>Early History of the Internet</div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                </ul>
            </div>
            <div>Merging the networks and creating the Internet</div>
            <div>
                <ul>
                    <li>1981 Computer Science Network (CSNET)</li>
                    <li>1982 TCP/IP protocol suite formalized</li>
                </ul>
            </div>
            <div>Popular Internet services</div>
            <div>
                <ul>
                    <li>1990 IMDb Internet movie database</li>
                    <li>1995 Amazon.com online retailer</li>
                </ul>
            </div>
        </jqxNavigationBar>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myNavigationBar') myNavigationBar: jqxNavigationBarComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myNavigationBar.add(1,'Header','Content');
    }

    
}
collapseAt Void index: String | Number 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNavigationBar #myNavigationBar 
            [width]="400" [height]="300">
            <div>Early History of the Internet</div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                </ul>
            </div>
            <div>Merging the networks and creating the Internet</div>
            <div>
                <ul>
                    <li>1981 Computer Science Network (CSNET)</li>
                    <li>1982 TCP/IP protocol suite formalized</li>
                </ul>
            </div>
            <div>Popular Internet services</div>
            <div>
                <ul>
                    <li>1990 IMDb Internet movie database</li>
                    <li>1995 Amazon.com online retailer</li>
                </ul>
            </div>
        </jqxNavigationBar>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myNavigationBar') myNavigationBar: jqxNavigationBarComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myNavigationBar.collapseAt(1);
    }

    
}
disableAt Void index: String | Number 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNavigationBar #myNavigationBar 
            [width]="400" [height]="300">
            <div>Early History of the Internet</div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                </ul>
            </div>
            <div>Merging the networks and creating the Internet</div>
            <div>
                <ul>
                    <li>1981 Computer Science Network (CSNET)</li>
                    <li>1982 TCP/IP protocol suite formalized</li>
                </ul>
            </div>
            <div>Popular Internet services</div>
            <div>
                <ul>
                    <li>1990 IMDb Internet movie database</li>
                    <li>1995 Amazon.com online retailer</li>
                </ul>
            </div>
        </jqxNavigationBar>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myNavigationBar') myNavigationBar: jqxNavigationBarComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myNavigationBar.disableAt(1);
    }

    
}
disable Void None 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNavigationBar #myNavigationBar 
            [width]="400" [height]="300">
            <div>Early History of the Internet</div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                </ul>
            </div>
            <div>Merging the networks and creating the Internet</div>
            <div>
                <ul>
                    <li>1981 Computer Science Network (CSNET)</li>
                    <li>1982 TCP/IP protocol suite formalized</li>
                </ul>
            </div>
            <div>Popular Internet services</div>
            <div>
                <ul>
                    <li>1990 IMDb Internet movie database</li>
                    <li>1995 Amazon.com online retailer</li>
                </ul>
            </div>
        </jqxNavigationBar>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myNavigationBar') myNavigationBar: jqxNavigationBarComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myNavigationBar.disable();
    }

    
}
destroy Void None 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNavigationBar #myNavigationBar 
            [width]="400" [height]="300">
            <div>Early History of the Internet</div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                </ul>
            </div>
            <div>Merging the networks and creating the Internet</div>
            <div>
                <ul>
                    <li>1981 Computer Science Network (CSNET)</li>
                    <li>1982 TCP/IP protocol suite formalized</li>
                </ul>
            </div>
            <div>Popular Internet services</div>
            <div>
                <ul>
                    <li>1990 IMDb Internet movie database</li>
                    <li>1995 Amazon.com online retailer</li>
                </ul>
            </div>
        </jqxNavigationBar>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myNavigationBar') myNavigationBar: jqxNavigationBarComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myNavigationBar.destroy();
    }

    
}
expandAt Void index: String | Number 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNavigationBar #myNavigationBar 
            [width]="400" [height]="300">
            <div>Early History of the Internet</div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                </ul>
            </div>
            <div>Merging the networks and creating the Internet</div>
            <div>
                <ul>
                    <li>1981 Computer Science Network (CSNET)</li>
                    <li>1982 TCP/IP protocol suite formalized</li>
                </ul>
            </div>
            <div>Popular Internet services</div>
            <div>
                <ul>
                    <li>1990 IMDb Internet movie database</li>
                    <li>1995 Amazon.com online retailer</li>
                </ul>
            </div>
        </jqxNavigationBar>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myNavigationBar') myNavigationBar: jqxNavigationBarComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myNavigationBar.expandAt(1);
    }

    
}
enableAt Void index: String | Number 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNavigationBar #myNavigationBar 
            [width]="400" [height]="300">
            <div>Early History of the Internet</div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                </ul>
            </div>
            <div>Merging the networks and creating the Internet</div>
            <div>
                <ul>
                    <li>1981 Computer Science Network (CSNET)</li>
                    <li>1982 TCP/IP protocol suite formalized</li>
                </ul>
            </div>
            <div>Popular Internet services</div>
            <div>
                <ul>
                    <li>1990 IMDb Internet movie database</li>
                    <li>1995 Amazon.com online retailer</li>
                </ul>
            </div>
        </jqxNavigationBar>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myNavigationBar') myNavigationBar: jqxNavigationBarComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myNavigationBar.enableAt(1);
    }

    
}
enable Void None 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNavigationBar #myNavigationBar 
            [width]="400" [height]="300">
            <div>Early History of the Internet</div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                </ul>
            </div>
            <div>Merging the networks and creating the Internet</div>
            <div>
                <ul>
                    <li>1981 Computer Science Network (CSNET)</li>
                    <li>1982 TCP/IP protocol suite formalized</li>
                </ul>
            </div>
            <div>Popular Internet services</div>
            <div>
                <ul>
                    <li>1990 IMDb Internet movie database</li>
                    <li>1995 Amazon.com online retailer</li>
                </ul>
            </div>
        </jqxNavigationBar>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myNavigationBar') myNavigationBar: jqxNavigationBarComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myNavigationBar.enable();
    }

    
}
focus Void None 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNavigationBar #myNavigationBar 
            [width]="400" [height]="300">
            <div>Early History of the Internet</div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                </ul>
            </div>
            <div>Merging the networks and creating the Internet</div>
            <div>
                <ul>
                    <li>1981 Computer Science Network (CSNET)</li>
                    <li>1982 TCP/IP protocol suite formalized</li>
                </ul>
            </div>
            <div>Popular Internet services</div>
            <div>
                <ul>
                    <li>1990 IMDb Internet movie database</li>
                    <li>1995 Amazon.com online retailer</li>
                </ul>
            </div>
        </jqxNavigationBar>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myNavigationBar') myNavigationBar: jqxNavigationBarComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myNavigationBar.focus();
    }

    
}
getHeaderContentAt String index: String | Number 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNavigationBar #myNavigationBar 
            [width]="400" [height]="300">
            <div>Early History of the Internet</div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                </ul>
            </div>
            <div>Merging the networks and creating the Internet</div>
            <div>
                <ul>
                    <li>1981 Computer Science Network (CSNET)</li>
                    <li>1982 TCP/IP protocol suite formalized</li>
                </ul>
            </div>
            <div>Popular Internet services</div>
            <div>
                <ul>
                    <li>1990 IMDb Internet movie database</li>
                    <li>1995 Amazon.com online retailer</li>
                </ul>
            </div>
        </jqxNavigationBar>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myNavigationBar') myNavigationBar: jqxNavigationBarComponent; 
 
    ngAfterViewInit(): void 
    {
        let value = this.myNavigationBar.getHeaderContentAt(1);
    }

    
}
getContentAt String index: String | Number 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNavigationBar #myNavigationBar 
            [width]="400" [height]="300">
            <div>Early History of the Internet</div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                </ul>
            </div>
            <div>Merging the networks and creating the Internet</div>
            <div>
                <ul>
                    <li>1981 Computer Science Network (CSNET)</li>
                    <li>1982 TCP/IP protocol suite formalized</li>
                </ul>
            </div>
            <div>Popular Internet services</div>
            <div>
                <ul>
                    <li>1990 IMDb Internet movie database</li>
                    <li>1995 Amazon.com online retailer</li>
                </ul>
            </div>
        </jqxNavigationBar>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myNavigationBar') myNavigationBar: jqxNavigationBarComponent; 
 
    ngAfterViewInit(): void 
    {
        let value = this.myNavigationBar.getContentAt(1);
    }

    
}
hideArrowAt Void index: String | Number 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNavigationBar #myNavigationBar 
            [width]="400" [height]="300">
            <div>Early History of the Internet</div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                </ul>
            </div>
            <div>Merging the networks and creating the Internet</div>
            <div>
                <ul>
                    <li>1981 Computer Science Network (CSNET)</li>
                    <li>1982 TCP/IP protocol suite formalized</li>
                </ul>
            </div>
            <div>Popular Internet services</div>
            <div>
                <ul>
                    <li>1990 IMDb Internet movie database</li>
                    <li>1995 Amazon.com online retailer</li>
                </ul>
            </div>
        </jqxNavigationBar>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myNavigationBar') myNavigationBar: jqxNavigationBarComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myNavigationBar.hideArrowAt(1);
    }

    
}
invalidate Void None 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNavigationBar #myNavigationBar 
            [width]="400" [height]="300">
            <div>Early History of the Internet</div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                </ul>
            </div>
            <div>Merging the networks and creating the Internet</div>
            <div>
                <ul>
                    <li>1981 Computer Science Network (CSNET)</li>
                    <li>1982 TCP/IP protocol suite formalized</li>
                </ul>
            </div>
            <div>Popular Internet services</div>
            <div>
                <ul>
                    <li>1990 IMDb Internet movie database</li>
                    <li>1995 Amazon.com online retailer</li>
                </ul>
            </div>
        </jqxNavigationBar>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myNavigationBar') myNavigationBar: jqxNavigationBarComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myNavigationBar.invalidate();
    }

    
}
insert Void Index: Number,
header: String | Number,
content: String | Number 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNavigationBar #myNavigationBar 
            [width]="400" [height]="300">
            <div>Early History of the Internet</div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                </ul>
            </div>
            <div>Merging the networks and creating the Internet</div>
            <div>
                <ul>
                    <li>1981 Computer Science Network (CSNET)</li>
                    <li>1982 TCP/IP protocol suite formalized</li>
                </ul>
            </div>
            <div>Popular Internet services</div>
            <div>
                <ul>
                    <li>1990 IMDb Internet movie database</li>
                    <li>1995 Amazon.com online retailer</li>
                </ul>
            </div>
        </jqxNavigationBar>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myNavigationBar') myNavigationBar: jqxNavigationBarComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myNavigationBar.insert(1,'Header','Content');
    }

    
}
refresh Void None 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNavigationBar #myNavigationBar 
            [width]="400" [height]="300">
            <div>Early History of the Internet</div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                </ul>
            </div>
            <div>Merging the networks and creating the Internet</div>
            <div>
                <ul>
                    <li>1981 Computer Science Network (CSNET)</li>
                    <li>1982 TCP/IP protocol suite formalized</li>
                </ul>
            </div>
            <div>Popular Internet services</div>
            <div>
                <ul>
                    <li>1990 IMDb Internet movie database</li>
                    <li>1995 Amazon.com online retailer</li>
                </ul>
            </div>
        </jqxNavigationBar>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myNavigationBar') myNavigationBar: jqxNavigationBarComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myNavigationBar.refresh();
    }

    
}
render Void None 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNavigationBar #myNavigationBar 
            [width]="400" [height]="300">
            <div>Early History of the Internet</div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                </ul>
            </div>
            <div>Merging the networks and creating the Internet</div>
            <div>
                <ul>
                    <li>1981 Computer Science Network (CSNET)</li>
                    <li>1982 TCP/IP protocol suite formalized</li>
                </ul>
            </div>
            <div>Popular Internet services</div>
            <div>
                <ul>
                    <li>1990 IMDb Internet movie database</li>
                    <li>1995 Amazon.com online retailer</li>
                </ul>
            </div>
        </jqxNavigationBar>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myNavigationBar') myNavigationBar: jqxNavigationBarComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myNavigationBar.render();
    }

    
}
remove Void index: String | Number 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNavigationBar #myNavigationBar 
            [width]="400" [height]="300">
            <div>Early History of the Internet</div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                </ul>
            </div>
            <div>Merging the networks and creating the Internet</div>
            <div>
                <ul>
                    <li>1981 Computer Science Network (CSNET)</li>
                    <li>1982 TCP/IP protocol suite formalized</li>
                </ul>
            </div>
            <div>Popular Internet services</div>
            <div>
                <ul>
                    <li>1990 IMDb Internet movie database</li>
                    <li>1995 Amazon.com online retailer</li>
                </ul>
            </div>
        </jqxNavigationBar>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myNavigationBar') myNavigationBar: jqxNavigationBarComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myNavigationBar.remove(1);
    }

    
}
setContentAt Void index: Number,
item: String | Number 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNavigationBar #myNavigationBar 
            [width]="400" [height]="300">
            <div>Early History of the Internet</div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                </ul>
            </div>
            <div>Merging the networks and creating the Internet</div>
            <div>
                <ul>
                    <li>1981 Computer Science Network (CSNET)</li>
                    <li>1982 TCP/IP protocol suite formalized</li>
                </ul>
            </div>
            <div>Popular Internet services</div>
            <div>
                <ul>
                    <li>1990 IMDb Internet movie database</li>
                    <li>1995 Amazon.com online retailer</li>
                </ul>
            </div>
        </jqxNavigationBar>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myNavigationBar') myNavigationBar: jqxNavigationBarComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myNavigationBar.setContentAt(1,'Content');
    }

    
}
setHeaderContentAt Void index: Number,
item: String | Number 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNavigationBar #myNavigationBar 
            [width]="400" [height]="300">
            <div>Early History of the Internet</div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                </ul>
            </div>
            <div>Merging the networks and creating the Internet</div>
            <div>
                <ul>
                    <li>1981 Computer Science Network (CSNET)</li>
                    <li>1982 TCP/IP protocol suite formalized</li>
                </ul>
            </div>
            <div>Popular Internet services</div>
            <div>
                <ul>
                    <li>1990 IMDb Internet movie database</li>
                    <li>1995 Amazon.com online retailer</li>
                </ul>
            </div>
        </jqxNavigationBar>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myNavigationBar') myNavigationBar: jqxNavigationBarComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myNavigationBar.setHeaderContentAt(1,'Header');
    }

    
}
showArrowAt Void index: String | Number 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNavigationBar #myNavigationBar 
            [width]="400" [height]="300">
            <div>Early History of the Internet</div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                </ul>
            </div>
            <div>Merging the networks and creating the Internet</div>
            <div>
                <ul>
                    <li>1981 Computer Science Network (CSNET)</li>
                    <li>1982 TCP/IP protocol suite formalized</li>
                </ul>
            </div>
            <div>Popular Internet services</div>
            <div>
                <ul>
                    <li>1990 IMDb Internet movie database</li>
                    <li>1995 Amazon.com online retailer</li>
                </ul>
            </div>
        </jqxNavigationBar>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myNavigationBar') myNavigationBar: jqxNavigationBarComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myNavigationBar.showArrowAt(1);
    }

    
}
update Void index: Number,
header: String | Number,
content: String | Number 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNavigationBar #myNavigationBar 
            [width]="400" [height]="300">
            <div>Early History of the Internet</div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                </ul>
            </div>
            <div>Merging the networks and creating the Internet</div>
            <div>
                <ul>
                    <li>1981 Computer Science Network (CSNET)</li>
                    <li>1982 TCP/IP protocol suite formalized</li>
                </ul>
            </div>
            <div>Popular Internet services</div>
            <div>
                <ul>
                    <li>1990 IMDb Internet movie database</li>
                    <li>1995 Amazon.com online retailer</li>
                </ul>
            </div>
        </jqxNavigationBar>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myNavigationBar') myNavigationBar: jqxNavigationBarComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myNavigationBar.update(1,'Title','Content');
    }

    
}
val String | Number value: String | Number 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxNavigationBar #myNavigationBar 
            [width]="400" [height]="300">
            <div>Early History of the Internet</div>
            <div>
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                </ul>
            </div>
            <div>Merging the networks and creating the Internet</div>
            <div>
                <ul>
                    <li>1981 Computer Science Network (CSNET)</li>
                    <li>1982 TCP/IP protocol suite formalized</li>
                </ul>
            </div>
            <div>Popular Internet services</div>
            <div>
                <ul>
                    <li>1990 IMDb Internet movie database</li>
                    <li>1995 Amazon.com online retailer</li>
                </ul>
            </div>
        </jqxNavigationBar>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myNavigationBar') myNavigationBar: jqxNavigationBarComponent; 
 
    ngAfterViewInit(): void 
    {
        let value = this.myNavigationBar.val(1);
    }

    
}