Angular NavigationBar API Reference

Name	Type	Default
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
Name	Return Type	Arguments
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); } }

Properties

Events

Code examples

Code examples

Code examples

Code examples

Methods