| Name | Type | Default |
|---|
|
columns
|
Array<String>
|
[]
|
Sets or gets the columns property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavBar #NavBar
[width]="300" [height]="40" [columns]="columns">
<ul>
<li>1</li>
<li>2</li>
</ul>
</jqxNavBar>
`
})
export class AppComponent {
}
|
|
disabled
|
Boolean
|
false
|
Sets or gets the disabled property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavBar #NavBar
[width]="300" [height]="40" [disabled]="true">
<ul>
<li>1</li>
<li>2</li>
</ul>
</jqxNavBar>
`
})
export class AppComponent {
}
|
|
height
|
String | Number
|
null
|
Sets or gets the height property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavBar #NavBar
[width]="300" [height]="40">
<ul>
<li>1</li>
<li>2</li>
</ul>
</jqxNavBar>
`
})
export class AppComponent {
}
|
|
minimized
|
Boolean
|
false
|
Sets or gets the minimized property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavBar #NavBar
[width]="300" [height]="40" [minimized]="true">
<ul>
<li>1</li>
<li>2</li>
</ul>
</jqxNavBar>
`
})
export class AppComponent {
}
|
|
minimizeButtonPosition
|
enum:NavBarMinimizeButtonPosition
|
'left'
|
enum NavBarMinimizeButtonPosition { left, right } Sets or gets the minimizeButtonPosition property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavBar #NavBar
[width]="300" [height]="40" [minimizeButtonPosition]="'right'">
<ul>
<li>1</li>
<li>2</li>
</ul>
</jqxNavBar>
`
})
export class AppComponent {
}
|
|
minimizedHeight
|
String | Number
|
30
|
Sets or gets the minimizedHeight property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavBar #NavBar
[width]="300" [height]="40" [minimizedHeight]="40">
<ul>
<li>1</li>
<li>2</li>
</ul>
</jqxNavBar>
`
})
export class AppComponent {
}
|
|
minimizedTitle
|
String | Number
|
""
|
Sets or gets the minimizedTitle property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavBar #NavBar
[width]="300" [height]="40" [minimizedTitle]="'custom element'">
<ul>
<li>1</li>
<li>2</li>
</ul>
</jqxNavBar>
`
})
export class AppComponent {
}
|
|
orientation
|
enum:NavBarOrientationOrientation
|
"horizontal"
|
Sets or gets the orientation property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavBar #NavBar
[width]="300" [height]="40" [orientation]="'vertical'">
<ul>
<li>1</li>
<li>2</li>
</ul>
</jqxNavBar>
`
})
export class AppComponent {
}
|
|
popupAnimationDelay
|
Number
|
250
|
Sets or gets the popupAnimationDelay property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavBar #NavBar
[width]="300" [height]="40" [popupAnimationDelay]="400">
<ul>
<li>1</li>
<li>2</li>
</ul>
</jqxNavBar>
`
})
export class AppComponent {
}
|
|
rtl
|
Boolean
|
false
|
Sets or gets the rtl property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavBar #NavBar
[width]="300" [height]="40" [rtl]="true">
<ul>
<li>1</li>
<li>2</li>
</ul>
</jqxNavBar>
`
})
export class AppComponent {
}
|
|
selection
|
Boolean
|
true
|
Sets or gets the selection property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavBar #NavBar
[width]="300" [height]="40" [selection]="false">
<ul>
<li>1</li>
<li>2</li>
</ul>
</jqxNavBar>
`
})
export class AppComponent {
}
|
|
selectedItem
|
String | Number
|
0
|
Sets or gets the selectedItem property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavBar #NavBar
[width]="300" [height]="40" [selectedItem]="1">
<ul>
<li>1</li>
<li>2</li>
</ul>
</jqxNavBar>
`
})
export class AppComponent {
}
|
|
theme
|
String
|
''
|
Sets or gets the theme property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavBar #NavBar
[width]="300" [height]="40" [theme]="'fresh'">
<ul>
<li>1</li>
<li>2</li>
</ul>
</jqxNavBar>
`
})
export class AppComponent {
}
|
|
width
|
String | Number
|
'100%'
|
Sets or gets the width property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavBar #NavBar
[width]="300" [height]="40">
<ul>
<li>1</li>
<li>2</li>
</ul>
</jqxNavBar>
`
})
export class AppComponent {
}
|
|
|
|
change
|
Event
|
|
This event is triggered when the user selects an item.
Code examples
Bind to the change event of jqxNavBar.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavBar #NavBar (onChange)="Change($event)"
[width]="300" [height]="40">
<ul>
<li>1</li>
<li>2</li>
</ul>
</jqxNavBar>
`
})
export class AppComponent {
Change(event: any): void
{
// Do Something
}
}
|
|
|
| Name | Return Type | Arguments |
|---|
|
close
|
Void
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavBar #NavBar
[width]="300" [height]="40">
<ul>
<li>1</li>
<li>2</li>
</ul>
</jqxNavBar>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myNavBar') myNavBar: jqxNavBarComponent;
ngAfterViewInit(): void
{
this.myNavBar.close();
}
}
|
|
destroy
|
Void
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavBar #NavBar
[width]="300" [height]="40">
<ul>
<li>1</li>
<li>2</li>
</ul>
</jqxNavBar>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myNavBar') myNavBar: jqxNavBarComponent;
ngAfterViewInit(): void
{
this.myNavBar.destroy();
}
}
|
|
getSelectedIndex
|
Number
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavBar #NavBar
[width]="300" [height]="40">
<ul>
<li>1</li>
<li>2</li>
</ul>
</jqxNavBar>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myNavBar') myNavBar: jqxNavBarComponent;
ngAfterViewInit(): void
{
let value = this.myNavBar.getSelectedIndex();
}
}
|
|
open
|
Void
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavBar #NavBar
[width]="300" [height]="40">
<ul>
<li>1</li>
<li>2</li>
</ul>
</jqxNavBar>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myNavBar') myNavBar: jqxNavBarComponent;
ngAfterViewInit(): void
{
this.myNavBar.open();
}
}
|
|
selectAt
|
Void
|
index: String | Number
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavBar #NavBar
[width]="300" [height]="40">
<ul>
<li>1</li>
<li>2</li>
</ul>
</jqxNavBar>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myNavBar') myNavBar: jqxNavBarComponent;
ngAfterViewInit(): void
{
this.myNavBar.selectAt(1);
}
}
|