Angular UI Components Documentation

Sets or gets the alwaysShowNavigationArrows property.

import { Component } from "@angular/core";
 
@Component({
    selector: 'app-root',
    template: `
        <jqxListMenu #myListMenu 
            [width]="'50%'" [alwaysShowNavigationArrows]="true">
            <ul data-role="listmenu">
                <li>
                    OSI  
                </li>
                <li>
                    TCP/IP
                </li>
            </ul>
        </jqxListMenu>
    `
})
 
export class AppComponent {
    
}

enum ListMenuAnimationType {
     slide,
     fade
}

Sets or gets the animationType property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListMenu #myListMenu 
            [width]="'50%'" [animationType]="'fade'">
            <ul data-role="listmenu">
                <li>
                    OSI  
                </li>
                <li>
                    TCP/IP
                </li>
            </ul>
        </jqxListMenu>
    `
})
 
export class AppComponent {
    
}

Sets or gets the animationDuration property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListMenu #myListMenu 
            [width]="'50%'" [animationDuration]="500">
            <ul data-role="listmenu">
                <li>
                    OSI  
                </li>
                <li>
                    TCP/IP
                </li>
            </ul>
        </jqxListMenu>
    `
})
 
export class AppComponent {
    
}

Sets or gets the autoSeparators property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListMenu #myListMenu 
            [width]="'50%'" [autoSeparators]="true">
            <ul data-role="listmenu">
                <li>
                    OSI  
                </li>
                <li>
                    TCP/IP
                </li>
            </ul>
        </jqxListMenu>
    `
})
 
export class AppComponent {
    
}

Sets or gets the backLabel property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListMenu #myListMenu 
            [width]="'50%'" [backLabel]="'Back Button'">
            <ul data-role="listmenu">
                <li>
                    OSI  
                </li>
                <li>
                    TCP/IP
                </li>
            </ul>
        </jqxListMenu>
    `
})
 
export class AppComponent {
    
}

Sets or gets the disabled property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListMenu #myListMenu 
            [width]="'50%'" [disabled]="true">
            <ul data-role="listmenu">
                <li>
                    OSI  
                </li>
                <li>
                    TCP/IP
                </li>
            </ul>
        </jqxListMenu>
    `
})
 
export class AppComponent {
    
}

Sets or gets the enableScrolling property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListMenu #myListMenu 
            [width]="'50%'" [enableScrolling]="false">
            <ul data-role="listmenu">
                <li>
                    OSI  
                </li>
                <li>
                    TCP/IP
                </li>
            </ul>
        </jqxListMenu>
    `
})
 
export class AppComponent {
    
}

Sets or gets the filterCallback property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListMenu #myListMenu 
            [width]="'50%'" [filterCallback]="filterCallback">
            <ul data-role="listmenu">
                <li>
                    OSI  
                </li>
                <li>
                    TCP/IP
                </li>
            </ul>
        </jqxListMenu>
    `
})
 
export class AppComponent {
    
}

Sets or gets the height property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListMenu #myListMenu 
            [width]="'50%'" [height]="500">
            <ul data-role="listmenu">
                <li>
                    OSI  
                </li>
                <li>
                    TCP/IP
                </li>
            </ul>
        </jqxListMenu>
    `
})
 
export class AppComponent {
    
}

Sets or gets the headerAnimationDuration property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListMenu #myListMenu 
            [width]="'50%'" [headerAnimationDuration]="500">
            <ul data-role="listmenu">
                <li>
                    OSI  
                </li>
                <li>
                    TCP/IP
                </li>
            </ul>
        </jqxListMenu>
    `
})
 
export class AppComponent {
    
}

Sets or gets the placeHolder property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListMenu #myListMenu 
            [width]="'50%'" [placeHolder]="'Search items...'">
            <ul data-role="listmenu">
                <li>
                    OSI  
                </li>
                <li>
                    TCP/IP
                </li>
            </ul>
        </jqxListMenu>
    `
})
 
export class AppComponent {
    
}

Sets or gets the readOnly property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListMenu #myListMenu 
            [width]="'50%'" [readOnly]="true">
            <ul data-role="listmenu">
                <li>
                    OSI  
                </li>
                <li>
                    TCP/IP
                </li>
            </ul>
        </jqxListMenu>
    `
})
 
export class AppComponent {
    
}

Sets or gets the rtl property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListMenu #myListMenu 
            [width]="'50%'" [rtl]="true">
            <ul data-role="listmenu">
                <li>
                    OSI  
                </li>
                <li>
                    TCP/IP
                </li>
            </ul>
        </jqxListMenu>
    `
})
 
export class AppComponent {
    
}

Sets or gets the roundedCorners property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListMenu #myListMenu 
            [width]="'50%'" [roundedCorners]="false">
            <ul data-role="listmenu">
                <li>
                    OSI  
                </li>
                <li>
                    TCP/IP
                </li>
            </ul>
        </jqxListMenu>
    `
})
 
export class AppComponent {
    
}

Sets or gets the showNavigationArrows property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListMenu #myListMenu 
            [width]="'50%'" [showNavigationArrows]="false">
            <ul data-role="listmenu">
                <li>
                    OSI  
                </li>
                <li>
                    TCP/IP
                </li>
            </ul>
        </jqxListMenu>
    `
})
 
export class AppComponent {
    
}

Sets or gets the showFilter property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListMenu #myListMenu 
            [width]="'50%'" [showFilter]="true">
            <ul data-role="listmenu">
                <li>
                    OSI  
                </li>
                <li>
                    TCP/IP
                </li>
            </ul>
        </jqxListMenu>
    `
})
 
export class AppComponent {
    
}

Sets or gets the showHeader property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListMenu #myListMenu 
            [width]="'50%'" [showHeader]="false">
            <ul data-role="listmenu">
                <li>
                    OSI  
                </li>
                <li>
                    TCP/IP
                </li>
            </ul>
        </jqxListMenu>
    `
})
 
export class AppComponent {
    
}

Sets or gets the showBackButton property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListMenu #myListMenu 
            [width]="'50%'" [showBackButton]="true">
            <ul data-role="listmenu">
                <li>
                    OSI  
                </li>
                <li>
                    TCP/IP
                </li>
            </ul>
        </jqxListMenu>
    `
})
 
export class AppComponent {
    
}

Sets or gets the theme property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListMenu #myListMenu 
            [width]="'50%'" [theme]="'energyblue'">
            <ul data-role="listmenu">
                <li>
                    OSI  
                </li>
                <li>
                    TCP/IP
                </li>
            </ul>
        </jqxListMenu>
    `
})
 
export class AppComponent {
    
}

Sets or gets the width property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListMenu #myListMenu 
            [width]="'50%'">
            <ul data-role="listmenu">
                <li>
                    OSI  
                </li>
                <li>
                    TCP/IP
                </li>
            </ul>
        </jqxListMenu>
    `
})
 
export class AppComponent {
    
}

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListMenu #myListMenu 
            [width]="'50%'">
            <ul data-role="listmenu">
                <li>
                    OSI  
                </li>
                <li>
                    TCP/IP
                </li>
            </ul>
        </jqxListMenu>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myListMenu') myListMenu: jqxListMenuComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myListMenu.back();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListMenu #myListMenu 
            [width]="'50%'">
            <ul data-role="listmenu">
                <li>
                    OSI  
                </li>
                <li>
                    TCP/IP
                </li>
            </ul>
        </jqxListMenu>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myListMenu') myListMenu: jqxListMenuComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myListMenu.changePage(Item);
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxListMenu #myListMenu 
            [width]="'50%'">
            <ul data-role="listmenu">
                <li>
                    OSI  
                </li>
                <li>
                    TCP/IP
                </li>
            </ul>
        </jqxListMenu>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myListMenu') myListMenu: jqxListMenuComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myListMenu.destroy();
    }

    
}