Properties

NameTypeDefault
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 {
    
}

Events

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
    }

    
}

Methods

NameReturn TypeArguments
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);
    }

    
}