Angular UI Components Documentation

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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
    }

    
}
							
						

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();
    }

    
}
							
						

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();
    }

    
}
							
						

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();
    }

    
}
							
						

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();
    }

    
}
							
						

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

    
}