Angular Menu API Reference

Name	Type	Default
animationShowDuration	Number	350
Sets or gets the `animationShowDuration` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30" [animationShowDuration]="3000"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education</li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo</li> </ul> </li> <li>All Industries And Solutions</li> </ul> </li> <li> Products <ul> <li>PC Products</li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home</li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers</li> <li>Developers</li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent { }
animationHideDuration	Number	250
Sets or gets the `animationHideDuration` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30" [animationHideDuration]="3000"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education</li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo</li> </ul> </li> <li>All Industries And Solutions</li> </ul> </li> <li> Products <ul> <li>PC Products</li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home</li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers</li> <li>Developers</li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent { }
animationHideDelay	Number	500
Sets or gets the `animationHideDelay` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30" [animationHideDelay]="3000"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education</li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo</li> </ul> </li> <li>All Industries And Solutions</li> </ul> </li> <li> Products <ul> <li>PC Products</li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home</li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers</li> <li>Developers</li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent { }
animationShowDelay	Number	200
Sets or gets the `animationShowDelay` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30" [animationShowDelay]="300"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education</li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo</li> </ul> </li> <li>All Industries And Solutions</li> </ul> </li> <li> Products <ul> <li>PC Products</li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home</li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers</li> <li>Developers</li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent { }
autoCloseInterval	Number	10000
Sets or gets the `autoCloseInterval` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30" [autoCloseInterval]="300"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education</li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo</li> </ul> </li> <li>All Industries And Solutions</li> </ul> </li> <li> Products <ul> <li>PC Products</li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home</li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers</li> <li>Developers</li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent { }
autoSizeMainItems	Boolean	true
Sets or gets the `autoSizeMainItems` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30" [autoSizeMainItems]="false"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education</li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo</li> </ul> </li> <li>All Industries And Solutions</li> </ul> </li> <li> Products <ul> <li>PC Products</li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home</li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers</li> <li>Developers</li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent { }
autoCloseOnClick	Boolean	true
Sets or gets the `autoCloseOnClick` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30" [autoCloseOnClick]="false"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education</li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo</li> </ul> </li> <li>All Industries And Solutions</li> </ul> </li> <li> Products <ul> <li>PC Products</li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home</li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers</li> <li>Developers</li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent { }
autoOpenPopup	Boolean	true
Sets or gets the `autoOpenPopup` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30" [autoOpenPopup]="false"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education</li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo</li> </ul> </li> <li>All Industries And Solutions</li> </ul> </li> <li> Products <ul> <li>PC Products</li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home</li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers</li> <li>Developers</li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent { }
autoOpen	Boolean	true
Sets or gets the `autoOpen` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30" [autoOpen]="false"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education</li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo</li> </ul> </li> <li>All Industries And Solutions</li> </ul> </li> <li> Products <ul> <li>PC Products</li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home</li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers</li> <li>Developers</li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent { }
autoCloseOnMouseLeave	Boolean	true
Sets or gets the `autoCloseOnMouseLeave` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30" [autoCloseOnMouseLeave]="false"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education</li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo</li> </ul> </li> <li>All Industries And Solutions</li> </ul> </li> <li> Products <ul> <li>PC Products</li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home</li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers</li> <li>Developers</li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent { }
clickToOpen	Boolean	false
Sets or gets the `clickToOpen` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30" [clickToOpen]="true"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education</li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo</li> </ul> </li> <li>All Industries And Solutions</li> </ul> </li> <li> Products <ul> <li>PC Products</li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home</li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers</li> <li>Developers</li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent { }
disabled	Boolean	false
Sets or gets the `disabled` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30" [disabled]="true"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education</li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo</li> </ul> </li> <li>All Industries And Solutions</li> </ul> </li> <li> Products <ul> <li>PC Products</li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home</li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers</li> <li>Developers</li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent { }
enableHover	Boolean	true
Sets or gets the `enableHover` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30" [enableHover]="false"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education</li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo</li> </ul> </li> <li>All Industries And Solutions</li> </ul> </li> <li> Products <ul> <li>PC Products</li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home</li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers</li> <li>Developers</li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent { }
easing	String	easeInOutSine
Sets or gets the `easing` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30" [easing]="'linear'"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education</li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo</li> </ul> </li> <li>All Industries And Solutions</li> </ul> </li> <li> Products <ul> <li>PC Products</li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home</li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers</li> <li>Developers</li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent { }
height	String \| Number	null
Sets or gets the `height` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education</li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo</li> </ul> </li> <li>All Industries And Solutions</li> </ul> </li> <li> Products <ul> <li>PC Products</li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home</li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers</li> <li>Developers</li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent { }
keyboardNavigation	Boolean	false
Sets or gets the `keyboardNavigation` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30" [keyboardNavigation]="true"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education</li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo</li> </ul> </li> <li>All Industries And Solutions</li> </ul> </li> <li> Products <ul> <li>PC Products</li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home</li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers</li> <li>Developers</li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent { }
minimizeWidth	String \| Number	'auto'
Sets or gets the `minimizeWidth` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30" [minimizeWidth]="450"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education</li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo</li> </ul> </li> <li>All Industries And Solutions</li> </ul> </li> <li> Products <ul> <li>PC Products</li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home</li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers</li> <li>Developers</li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent { }
mode	enum:MenuMode	horizontal
enum MenuMode { horizontal, vertical, popup } Sets or gets the `mode` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30" [mode]="'vertical'"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education</li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo</li> </ul> </li> <li>All Industries And Solutions</li> </ul> </li> <li> Products <ul> <li>PC Products</li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home</li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers</li> <li>Developers</li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent { }
popupZIndex	String \| Number	20000
Sets or gets the `popupZIndex` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30" [popupZIndex]="99999"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education</li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo</li> </ul> </li> <li>All Industries And Solutions</li> </ul> </li> <li> Products <ul> <li>PC Products</li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home</li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers</li> <li>Developers</li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent { }
rtl	Boolean	false
Sets or gets the `rtl` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30" [rtl]="true"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education</li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo</li> </ul> </li> <li>All Industries And Solutions</li> </ul> </li> <li> Products <ul> <li>PC Products</li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home</li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers</li> <li>Developers</li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent { }
showTopLevelArrows	Boolean	false
Sets or gets the `showTopLevelArrows` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30" [showTopLevelArrows]="true"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education</li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo</li> </ul> </li> <li>All Industries And Solutions</li> </ul> </li> <li> Products <ul> <li>PC Products</li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home</li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers</li> <li>Developers</li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent { }
source	Any	null
Sets or gets the `source` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30" [source]="source"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education</li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo</li> </ul> </li> <li>All Industries And Solutions</li> </ul> </li> <li> Products <ul> <li>PC Products</li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home</li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers</li> <li>Developers</li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent { }
theme	String	''
Sets or gets the `theme` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30" [theme]="'energyblue'"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education</li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo</li> </ul> </li> <li>All Industries And Solutions</li> </ul> </li> <li> Products <ul> <li>PC Products</li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home</li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers</li> <li>Developers</li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent { }
width	String \| Number	null
Sets or gets the `width` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education</li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo</li> </ul> </li> <li>All Industries And Solutions</li> </ul> </li> <li> Products <ul> <li>PC Products</li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home</li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers</li> <li>Developers</li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent { }
Events
closed	Event
This event is triggered when any of the jqxMenu Sub Menus is closed. Code examples Bind to the `closed` event of jqxMenu. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu (onClosed)="Closed($event)" [width]="670" [height]="30"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education</li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo</li> </ul> </li> <li>All Industries And Solutions</li> </ul> </li> <li> Products <ul> <li>PC Products</li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home</li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers</li> <li>Developers</li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent { Closed(event: any): void { // Do Something } }
itemclick	Event
This event is triggered when a menu item is clicked. Code examples Bind to the `itemclick` event of jqxMenu. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu (onItemclick)="Itemclick($event)" [width]="670" [height]="30"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education</li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo</li> </ul> </li> <li>All Industries And Solutions</li> </ul> </li> <li> Products <ul> <li>PC Products</li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home</li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers</li> <li>Developers</li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent { Itemclick(event: any): void { // Do Something } }
initialized	Event
This event is triggered after the menu is initialized. Code examples Bind to the `initialized` event of jqxMenu. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu (onInitialized)="Initialized($event)" [width]="670" [height]="30"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education</li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo</li> </ul> </li> <li>All Industries And Solutions</li> </ul> </li> <li> Products <ul> <li>PC Products</li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home</li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers</li> <li>Developers</li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent { Initialized(event: any): void { // Do Something } }
shown	Event
This event is triggered when any of the jqxMenu Sub Menus is displayed. Code examples Bind to the `shown` event of jqxMenu. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu (onShown)="Shown($event)" [width]="670" [height]="30"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education</li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo</li> </ul> </li> <li>All Industries And Solutions</li> </ul> </li> <li> Products <ul> <li>PC Products</li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home</li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers</li> <li>Developers</li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent { Shown(event: any): void { // Do Something } }
Methods
Name	Return Type	Arguments
closeItem	Void	itemID: String \| Number
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education</li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo</li> </ul> </li> <li>All Industries And Solutions</li> </ul> </li> <li> Products <ul> <li>PC Products</li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home</li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers</li> <li>Developers</li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myMenu') myMenu: jqxMenuComponent; ngAfterViewInit(): void { this.myMenu.closeItem(Item1); } }
close	Void	None
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education</li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo</li> </ul> </li> <li>All Industries And Solutions</li> </ul> </li> <li> Products <ul> <li>PC Products</li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home</li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers</li> <li>Developers</li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myMenu') myMenu: jqxMenuComponent; ngAfterViewInit(): void { this.myMenu.close(); } }
disable	Void	itemID: String \| Number, value: Boolean
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education</li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo</li> </ul> </li> <li>All Industries And Solutions</li> </ul> </li> <li> Products <ul> <li>PC Products</li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home</li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers</li> <li>Developers</li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myMenu') myMenu: jqxMenuComponent; ngAfterViewInit(): void { this.myMenu.disable(0,true); } }
destroy	Void	None
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education</li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo</li> </ul> </li> <li>All Industries And Solutions</li> </ul> </li> <li> Products <ul> <li>PC Products</li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home</li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers</li> <li>Developers</li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myMenu') myMenu: jqxMenuComponent; ngAfterViewInit(): void { this.myMenu.destroy(); } }
focus	Void	None
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education</li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo</li> </ul> </li> <li>All Industries And Solutions</li> </ul> </li> <li> Products <ul> <li>PC Products</li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home</li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers</li> <li>Developers</li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myMenu') myMenu: jqxMenuComponent; ngAfterViewInit(): void { this.myMenu.focus(); } }
minimize	Void	None
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education</li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo</li> </ul> </li> <li>All Industries And Solutions</li> </ul> </li> <li> Products <ul> <li>PC Products</li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home</li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers</li> <li>Developers</li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myMenu') myMenu: jqxMenuComponent; ngAfterViewInit(): void { this.myMenu.minimize(); } }
open	Void	left: Number, top: Number
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education</li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo</li> </ul> </li> <li>All Industries And Solutions</li> </ul> </li> <li> Products <ul> <li>PC Products</li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home</li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers</li> <li>Developers</li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myMenu') myMenu: jqxMenuComponent; ngAfterViewInit(): void { this.myMenu.open(10,10); } }
openItem	Void	itemID: String \| Number
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education</li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo</li> </ul> </li> <li>All Industries And Solutions</li> </ul> </li> <li> Products <ul> <li>PC Products</li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home</li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers</li> <li>Developers</li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myMenu') myMenu: jqxMenuComponent; ngAfterViewInit(): void { this.myMenu.openItem(Item1); } }
restore	Void	None
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education</li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo</li> </ul> </li> <li>All Industries And Solutions</li> </ul> </li> <li> Products <ul> <li>PC Products</li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home</li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers</li> <li>Developers</li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myMenu') myMenu: jqxMenuComponent; ngAfterViewInit(): void { this.myMenu.restore(); } }
setItemOpenDirection	Void	item: String \| Number, horizontaldirection: String, verticaldirection: String
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxMenu #myMenu [width]="670" [height]="30"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style="width: 250px;"> <li>Education</li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo</li> </ul> </li> <li>All Industries And Solutions</li> </ul> </li> <li> Products <ul> <li>PC Products</li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home</li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers</li> <li>Developers</li> </ul> </li> </ul> </jqxMenu> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myMenu') myMenu: jqxMenuComponent; ngAfterViewInit(): void { this.myMenu.setItemOpenDirection(Item1,left,top); } }

Properties

Events

Code examples

Code examples

Code examples

Code examples

Methods