| Name | Type | Default |
|---|
|
alwaysShowNavigationArrows
|
Boolean
|
false
|
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 {
}
|
|
animationType
|
enum:ListMenuAnimationType
|
"slide"
|
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 {
}
|
|
animationDuration
|
String | Number
|
250
|
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 {
}
|
|
autoSeparators
|
Boolean
|
false
|
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 {
}
|
|
backLabel
|
String | Number
|
"Back"
|
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 {
}
|
|
disabled
|
Boolean
|
false
|
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 {
}
|
|
enableScrolling
|
Boolean
|
true
|
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 {
}
|
|
filterCallback
|
(text:String, seachValue:String | Number) => Boolean
|
function (text, searchValue){return text.toString().toLowerCase().indexOf(searchValue.toLowerCase()) >= 0;};
|
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 {
}
|
|
height
|
String | Number
|
auto
|
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 {
}
|
|
headerAnimationDuration
|
String | Number
|
0
|
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 {
}
|
|
placeHolder
|
String | Number
|
'Filter list items...'
|
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 {
}
|
|
readOnly
|
Boolean
|
false
|
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 {
}
|
|
rtl
|
Boolean
|
false
|
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 {
}
|
|
roundedCorners
|
Boolean
|
true
|
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 {
}
|
|
showNavigationArrows
|
Boolean
|
true
|
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 {
}
|
|
showFilter
|
Boolean
|
false
|
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 {
}
|
|
showHeader
|
Boolean
|
true
|
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 {
}
|
|
showBackButton
|
Boolean
|
true
|
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 {
}
|
|
theme
|
String
|
''
|
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 {
}
|
|
width
|
String | Number
|
100%
|
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 {
}
|
|
|
|
|
| Name | Return Type | Arguments |
|---|
|
back
|
Void
|
None
|
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();
}
}
|
|
changePage
|
Void
|
Item: Any
|
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);
}
}
|
|
destroy
|
Void
|
None
|
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();
}
}
|