Angular Ribbon API Reference

Name	Type	Default
animationType	enum:RibbonAnimationType	'fade'
enum RibbonAnimationType { fade, slide, none } Sets or gets the `animationType` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxRibbon #myRibbon [width]="800" [animationType]="'slide'"> <ul style="border-top-left-radius: 0; border-top-right-radius: 0;"> <li style="margin-left: 30px;">Node.js</li> <li style="margin-left: 30px;">JavaServer Pages</li> <li style="margin-left: 30px;">Active Server Pages</li> </ul> <div> <div> Node.js is an event-driven I/O server-side JavaScript environment based on V8..... </div> <div> JavaServer Pages (JSP) is a Java technology that helps software developers serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </jqxRibbon> ` }) export class AppComponent { }
animationDelay	String \| Number	400
Sets or gets the `animationDelay` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxRibbon #myRibbon [width]="800" [animationType]="'slide'" [animationDelay]="800"> <ul style="border-top-left-radius: 0; border-top-right-radius: 0;"> <li style="margin-left: 30px;">Node.js</li> <li style="margin-left: 30px;">JavaServer Pages</li> <li style="margin-left: 30px;">Active Server Pages</li> </ul> <div> <div> Node.js is an event-driven I/O server-side JavaScript environment based on V8..... </div> <div> JavaServer Pages (JSP) is a Java technology that helps software developers serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </jqxRibbon> ` }) export class AppComponent { }
disabled	Boolean	false
Sets or gets the `disabled` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxRibbon #myRibbon [width]="800" [animationType]="'slide'" [disabled]="true"> <ul style="border-top-left-radius: 0; border-top-right-radius: 0;"> <li style="margin-left: 30px;">Node.js</li> <li style="margin-left: 30px;">JavaServer Pages</li> <li style="margin-left: 30px;">Active Server Pages</li> </ul> <div> <div> Node.js is an event-driven I/O server-side JavaScript environment based on V8..... </div> <div> JavaServer Pages (JSP) is a Java technology that helps software developers serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </jqxRibbon> ` }) export class AppComponent { }
height	String \| Number	100
Sets or gets the `height` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxRibbon #myRibbon [width]="800" [animationType]="'slide'" [height]="100"> <ul style="border-top-left-radius: 0; border-top-right-radius: 0;"> <li style="margin-left: 30px;">Node.js</li> <li style="margin-left: 30px;">JavaServer Pages</li> <li style="margin-left: 30px;">Active Server Pages</li> </ul> <div> <div> Node.js is an event-driven I/O server-side JavaScript environment based on V8..... </div> <div> JavaServer Pages (JSP) is a Java technology that helps software developers serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </jqxRibbon> ` }) export class AppComponent { }
initContent	(index: Any) => Void	null
Sets or gets the `initContent` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxRibbon #myRibbon [width]="800" [animationType]="'slide'" [initContent]="initContent"> <ul style="border-top-left-radius: 0; border-top-right-radius: 0;"> <li style="margin-left: 30px;">Node.js</li> <li style="margin-left: 30px;">JavaServer Pages</li> <li style="margin-left: 30px;">Active Server Pages</li> </ul> <div> <div> Node.js is an event-driven I/O server-side JavaScript environment based on V8..... </div> <div> JavaServer Pages (JSP) is a Java technology that helps software developers serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </jqxRibbon> ` }) export class AppComponent { }
mode	enum:RibbonMode	'default'
enum RibbonMode { default, popup } Sets or gets the `mode` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxRibbon #myRibbon [width]="800" [animationType]="'slide'" [mode]="'popup'"> <ul style="border-top-left-radius: 0; border-top-right-radius: 0;"> <li style="margin-left: 30px;">Node.js</li> <li style="margin-left: 30px;">JavaServer Pages</li> <li style="margin-left: 30px;">Active Server Pages</li> </ul> <div> <div> Node.js is an event-driven I/O server-side JavaScript environment based on V8..... </div> <div> JavaServer Pages (JSP) is a Java technology that helps software developers serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </jqxRibbon> ` }) export class AppComponent { }
popupCloseMode	enum:RibbonPopupCloseMode	'click'
enum RibbonPopupCloseMode { click, mouseLeave, none } Sets or gets the `popupCloseMode` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxRibbon #myRibbon [width]="800" [animationType]="'slide'" [popupCloseMode]="'mouseLeave'"> <ul style="border-top-left-radius: 0; border-top-right-radius: 0;"> <li style="margin-left: 30px;">Node.js</li> <li style="margin-left: 30px;">JavaServer Pages</li> <li style="margin-left: 30px;">Active Server Pages</li> </ul> <div> <div> Node.js is an event-driven I/O server-side JavaScript environment based on V8..... </div> <div> JavaServer Pages (JSP) is a Java technology that helps software developers serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </jqxRibbon> ` }) export class AppComponent { }
position	enum:RibbonPosition	'top'
enum RibbonPosition { top, bottom, left, right } Sets or gets the `position` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxRibbon #myRibbon [width]="800" [animationType]="'slide'" [position]="'left'"> <ul style="border-top-left-radius: 0; border-top-right-radius: 0;"> <li style="margin-left: 30px;">Node.js</li> <li style="margin-left: 30px;">JavaServer Pages</li> <li style="margin-left: 30px;">Active Server Pages</li> </ul> <div> <div> Node.js is an event-driven I/O server-side JavaScript environment based on V8..... </div> <div> JavaServer Pages (JSP) is a Java technology that helps software developers serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </jqxRibbon> ` }) export class AppComponent { }
rtl	Boolean	false
Sets or gets the `rtl` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxRibbon #myRibbon [width]="800" [animationType]="'slide'" [rtl]="true"> <ul style="border-top-left-radius: 0; border-top-right-radius: 0;"> <li style="margin-left: 30px;">Node.js</li> <li style="margin-left: 30px;">JavaServer Pages</li> <li style="margin-left: 30px;">Active Server Pages</li> </ul> <div> <div> Node.js is an event-driven I/O server-side JavaScript environment based on V8..... </div> <div> JavaServer Pages (JSP) is a Java technology that helps software developers serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </jqxRibbon> ` }) export class AppComponent { }
selectedIndex	Number	0
Sets or gets the `selectedIndex` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxRibbon #myRibbon [width]="800" [animationType]="'slide'" [selectedIndex]="2"> <ul style="border-top-left-radius: 0; border-top-right-radius: 0;"> <li style="margin-left: 30px;">Node.js</li> <li style="margin-left: 30px;">JavaServer Pages</li> <li style="margin-left: 30px;">Active Server Pages</li> </ul> <div> <div> Node.js is an event-driven I/O server-side JavaScript environment based on V8..... </div> <div> JavaServer Pages (JSP) is a Java technology that helps software developers serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </jqxRibbon> ` }) export class AppComponent { }
selectionMode	enum:RibbonSelectionMode	'click'
enum RibbonSelectionMode { click, hover, none } Sets or gets the `selectionMode` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxRibbon #myRibbon [width]="800" [animationType]="'slide'" [selectionMode]="'hover'"> <ul style="border-top-left-radius: 0; border-top-right-radius: 0;"> <li style="margin-left: 30px;">Node.js</li> <li style="margin-left: 30px;">JavaServer Pages</li> <li style="margin-left: 30px;">Active Server Pages</li> </ul> <div> <div> Node.js is an event-driven I/O server-side JavaScript environment based on V8..... </div> <div> JavaServer Pages (JSP) is a Java technology that helps software developers serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </jqxRibbon> ` }) export class AppComponent { }
scrollPosition	enum:RibbonScrollPosition	'both'
enum RibbonScrollPosition { both, near, far } Sets or gets the `scrollPosition` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxRibbon #myRibbon [width]="800" [animationType]="'slide'" [scrollPosition]="'near'"> <ul style="border-top-left-radius: 0; border-top-right-radius: 0;"> <li style="margin-left: 30px;">Node.js</li> <li style="margin-left: 30px;">JavaServer Pages</li> <li style="margin-left: 30px;">Active Server Pages</li> </ul> <div> <div> Node.js is an event-driven I/O server-side JavaScript environment based on V8..... </div> <div> JavaServer Pages (JSP) is a Java technology that helps software developers serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </jqxRibbon> ` }) export class AppComponent { }
scrollStep	Number	10
Sets or gets the `scrollStep` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxRibbon #myRibbon [width]="800" [animationType]="'slide'" [scrollStep]="20"> <ul style="border-top-left-radius: 0; border-top-right-radius: 0;"> <li style="margin-left: 30px;">Node.js</li> <li style="margin-left: 30px;">JavaServer Pages</li> <li style="margin-left: 30px;">Active Server Pages</li> </ul> <div> <div> Node.js is an event-driven I/O server-side JavaScript environment based on V8..... </div> <div> JavaServer Pages (JSP) is a Java technology that helps software developers serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </jqxRibbon> ` }) export class AppComponent { }
scrollDelay	Number	50
Sets or gets the `scrollDelay` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxRibbon #myRibbon [width]="800" [animationType]="'slide'" [scrollDelay]="100"> <ul style="border-top-left-radius: 0; border-top-right-radius: 0;"> <li style="margin-left: 30px;">Node.js</li> <li style="margin-left: 30px;">JavaServer Pages</li> <li style="margin-left: 30px;">Active Server Pages</li> </ul> <div> <div> Node.js is an event-driven I/O server-side JavaScript environment based on V8..... </div> <div> JavaServer Pages (JSP) is a Java technology that helps software developers serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </jqxRibbon> ` }) export class AppComponent { }
theme	String	''
Sets or gets the `theme` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxRibbon #myRibbon [width]="800" [animationType]="'slide'" [theme]="'energyblue'"> <ul style="border-top-left-radius: 0; border-top-right-radius: 0;"> <li style="margin-left: 30px;">Node.js</li> <li style="margin-left: 30px;">JavaServer Pages</li> <li style="margin-left: 30px;">Active Server Pages</li> </ul> <div> <div> Node.js is an event-driven I/O server-side JavaScript environment based on V8..... </div> <div> JavaServer Pages (JSP) is a Java technology that helps software developers serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </jqxRibbon> ` }) export class AppComponent { }
width	String \| Number	null
Sets or gets the `width` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxRibbon #myRibbon [width]="800" [animationType]="'slide'"> <ul style="border-top-left-radius: 0; border-top-right-radius: 0;"> <li style="margin-left: 30px;">Node.js</li> <li style="margin-left: 30px;">JavaServer Pages</li> <li style="margin-left: 30px;">Active Server Pages</li> </ul> <div> <div> Node.js is an event-driven I/O server-side JavaScript environment based on V8..... </div> <div> JavaServer Pages (JSP) is a Java technology that helps software developers serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </jqxRibbon> ` }) export class AppComponent { }
Events
change	Event
This event is triggered when the user selects or unselects an item. Code examples Bind to the `change` event of jqxRibbon. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxRibbon #myRibbon(onChange)="Change($event)" [width]="800" [animationType]="'slide'"> <ul style="border-top-left-radius: 0; border-top-right-radius: 0;"> <li style="margin-left: 30px;">Node.js</li> <li style="margin-left: 30px;">JavaServer Pages</li> <li style="margin-left: 30px;">Active Server Pages</li> </ul> <div> <div> Node.js is an event-driven I/O server-side JavaScript environment based on V8..... </div> <div> JavaServer Pages (JSP) is a Java technology that helps software developers serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </jqxRibbon> ` }) export class AppComponent { Change(event: any): void { // Do Something } }
reorder	Event
This event is triggered when the user reorders the jqxRibbon items with the mouse. Code examples Bind to the `reorder` event of jqxRibbon. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxRibbon #myRibbon(onReorder)="Reorder($event)" [width]="800" [animationType]="'slide'"> <ul style="border-top-left-radius: 0; border-top-right-radius: 0;"> <li style="margin-left: 30px;">Node.js</li> <li style="margin-left: 30px;">JavaServer Pages</li> <li style="margin-left: 30px;">Active Server Pages</li> </ul> <div> <div> Node.js is an event-driven I/O server-side JavaScript environment based on V8..... </div> <div> JavaServer Pages (JSP) is a Java technology that helps software developers serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </jqxRibbon> ` }) export class AppComponent { Reorder(event: any): void { // Do Something } }
select	Event
This event is triggered when the user selects an item. Code examples Bind to the `select` event of jqxRibbon. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxRibbon #myRibbon(onSelect)="Select($event)" [width]="800" [animationType]="'slide'"> <ul style="border-top-left-radius: 0; border-top-right-radius: 0;"> <li style="margin-left: 30px;">Node.js</li> <li style="margin-left: 30px;">JavaServer Pages</li> <li style="margin-left: 30px;">Active Server Pages</li> </ul> <div> <div> Node.js is an event-driven I/O server-side JavaScript environment based on V8..... </div> <div> JavaServer Pages (JSP) is a Java technology that helps software developers serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </jqxRibbon> ` }) export class AppComponent { Select(event: any): void { // Do Something } }
unselect	Event
This event is triggered when the user unselects an item. Code examples Bind to the `unselect` event of jqxRibbon. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxRibbon #myRibbon(onUnselect)="Unselect($event)" [width]="800" [animationType]="'slide'"> <ul style="border-top-left-radius: 0; border-top-right-radius: 0;"> <li style="margin-left: 30px;">Node.js</li> <li style="margin-left: 30px;">JavaServer Pages</li> <li style="margin-left: 30px;">Active Server Pages</li> </ul> <div> <div> Node.js is an event-driven I/O server-side JavaScript environment based on V8..... </div> <div> JavaServer Pages (JSP) is a Java technology that helps software developers serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </jqxRibbon> ` }) export class AppComponent { Unselect(event: any): void { // Do Something } }
Methods
Name	Return Type	Arguments
addAt	Void	index: Number, item: RibbonItem
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxRibbon #myRibbon [width]="800" [animationType]="'slide'"> <ul style="border-top-left-radius: 0; border-top-right-radius: 0;"> <li style="margin-left: 30px;">Node.js</li> <li style="margin-left: 30px;">JavaServer Pages</li> <li style="margin-left: 30px;">Active Server Pages</li> </ul> <div> <div> Node.js is an event-driven I/O server-side JavaScript environment based on V8..... </div> <div> JavaServer Pages (JSP) is a Java technology that helps software developers serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </jqxRibbon> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myRibbon') myRibbon: jqxRibbonComponent; ngAfterViewInit(): void { this.myRibbon.addAt(0); } }
clearSelection	Void	None
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxRibbon #myRibbon [width]="800" [animationType]="'slide'"> <ul style="border-top-left-radius: 0; border-top-right-radius: 0;"> <li style="margin-left: 30px;">Node.js</li> <li style="margin-left: 30px;">JavaServer Pages</li> <li style="margin-left: 30px;">Active Server Pages</li> </ul> <div> <div> Node.js is an event-driven I/O server-side JavaScript environment based on V8..... </div> <div> JavaServer Pages (JSP) is a Java technology that helps software developers serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </jqxRibbon> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myRibbon') myRibbon: jqxRibbonComponent; ngAfterViewInit(): void { this.myRibbon.clearSelection(); } }
disableAt	Void	index: Number
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxRibbon #myRibbon [width]="800" [animationType]="'slide'"> <ul style="border-top-left-radius: 0; border-top-right-radius: 0;"> <li style="margin-left: 30px;">Node.js</li> <li style="margin-left: 30px;">JavaServer Pages</li> <li style="margin-left: 30px;">Active Server Pages</li> </ul> <div> <div> Node.js is an event-driven I/O server-side JavaScript environment based on V8..... </div> <div> JavaServer Pages (JSP) is a Java technology that helps software developers serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </jqxRibbon> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myRibbon') myRibbon: jqxRibbonComponent; ngAfterViewInit(): void { this.myRibbon.disableAt(0); } }
destroy	Void	None
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxRibbon #myRibbon [width]="800" [animationType]="'slide'"> <ul style="border-top-left-radius: 0; border-top-right-radius: 0;"> <li style="margin-left: 30px;">Node.js</li> <li style="margin-left: 30px;">JavaServer Pages</li> <li style="margin-left: 30px;">Active Server Pages</li> </ul> <div> <div> Node.js is an event-driven I/O server-side JavaScript environment based on V8..... </div> <div> JavaServer Pages (JSP) is a Java technology that helps software developers serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </jqxRibbon> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myRibbon') myRibbon: jqxRibbonComponent; ngAfterViewInit(): void { this.myRibbon.destroy(); } }
enableAt	Void	index: Number
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxRibbon #myRibbon [width]="800" [animationType]="'slide'"> <ul style="border-top-left-radius: 0; border-top-right-radius: 0;"> <li style="margin-left: 30px;">Node.js</li> <li style="margin-left: 30px;">JavaServer Pages</li> <li style="margin-left: 30px;">Active Server Pages</li> </ul> <div> <div> Node.js is an event-driven I/O server-side JavaScript environment based on V8..... </div> <div> JavaServer Pages (JSP) is a Java technology that helps software developers serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </jqxRibbon> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myRibbon') myRibbon: jqxRibbonComponent; ngAfterViewInit(): void { this.myRibbon.enableAt(0); } }
hideAt	Void	index: Number
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxRibbon #myRibbon [width]="800" [animationType]="'slide'"> <ul style="border-top-left-radius: 0; border-top-right-radius: 0;"> <li style="margin-left: 30px;">Node.js</li> <li style="margin-left: 30px;">JavaServer Pages</li> <li style="margin-left: 30px;">Active Server Pages</li> </ul> <div> <div> Node.js is an event-driven I/O server-side JavaScript environment based on V8..... </div> <div> JavaServer Pages (JSP) is a Java technology that helps software developers serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </jqxRibbon> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myRibbon') myRibbon: jqxRibbonComponent; ngAfterViewInit(): void { this.myRibbon.hideAt(0); } }
removeAt	Void	index: Number
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxRibbon #myRibbon [width]="800" [animationType]="'slide'"> <ul style="border-top-left-radius: 0; border-top-right-radius: 0;"> <li style="margin-left: 30px;">Node.js</li> <li style="margin-left: 30px;">JavaServer Pages</li> <li style="margin-left: 30px;">Active Server Pages</li> </ul> <div> <div> Node.js is an event-driven I/O server-side JavaScript environment based on V8..... </div> <div> JavaServer Pages (JSP) is a Java technology that helps software developers serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </jqxRibbon> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myRibbon') myRibbon: jqxRibbonComponent; ngAfterViewInit(): void { this.myRibbon.removeAt(0); } }
render	Void	None
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxRibbon #myRibbon [width]="800" [animationType]="'slide'"> <ul style="border-top-left-radius: 0; border-top-right-radius: 0;"> <li style="margin-left: 30px;">Node.js</li> <li style="margin-left: 30px;">JavaServer Pages</li> <li style="margin-left: 30px;">Active Server Pages</li> </ul> <div> <div> Node.js is an event-driven I/O server-side JavaScript environment based on V8..... </div> <div> JavaServer Pages (JSP) is a Java technology that helps software developers serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </jqxRibbon> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myRibbon') myRibbon: jqxRibbonComponent; ngAfterViewInit(): void { this.myRibbon.render(); } }
refresh	Void	None
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxRibbon #myRibbon [width]="800" [animationType]="'slide'"> <ul style="border-top-left-radius: 0; border-top-right-radius: 0;"> <li style="margin-left: 30px;">Node.js</li> <li style="margin-left: 30px;">JavaServer Pages</li> <li style="margin-left: 30px;">Active Server Pages</li> </ul> <div> <div> Node.js is an event-driven I/O server-side JavaScript environment based on V8..... </div> <div> JavaServer Pages (JSP) is a Java technology that helps software developers serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </jqxRibbon> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myRibbon') myRibbon: jqxRibbonComponent; ngAfterViewInit(): void { this.myRibbon.refresh(); } }
selectAt	Void	index: Number
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxRibbon #myRibbon [width]="800" [animationType]="'slide'"> <ul style="border-top-left-radius: 0; border-top-right-radius: 0;"> <li style="margin-left: 30px;">Node.js</li> <li style="margin-left: 30px;">JavaServer Pages</li> <li style="margin-left: 30px;">Active Server Pages</li> </ul> <div> <div> Node.js is an event-driven I/O server-side JavaScript environment based on V8..... </div> <div> JavaServer Pages (JSP) is a Java technology that helps software developers serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </jqxRibbon> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myRibbon') myRibbon: jqxRibbonComponent; ngAfterViewInit(): void { this.myRibbon.selectAt(0); } }
showAt	Void	index: Number
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxRibbon #myRibbon [width]="800" [animationType]="'slide'"> <ul style="border-top-left-radius: 0; border-top-right-radius: 0;"> <li style="margin-left: 30px;">Node.js</li> <li style="margin-left: 30px;">JavaServer Pages</li> <li style="margin-left: 30px;">Active Server Pages</li> </ul> <div> <div> Node.js is an event-driven I/O server-side JavaScript environment based on V8..... </div> <div> JavaServer Pages (JSP) is a Java technology that helps software developers serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </jqxRibbon> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myRibbon') myRibbon: jqxRibbonComponent; ngAfterViewInit(): void { this.myRibbon.showAt(0); } }
setPopupLayout	Void	index: Number, layout: Any, width: String \| Number, height: String \| Number
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxRibbon #myRibbon [width]="800" [animationType]="'slide'"> <ul style="border-top-left-radius: 0; border-top-right-radius: 0;"> <li style="margin-left: 30px;">Node.js</li> <li style="margin-left: 30px;">JavaServer Pages</li> <li style="margin-left: 30px;">Active Server Pages</li> </ul> <div> <div> Node.js is an event-driven I/O server-side JavaScript environment based on V8..... </div> <div> JavaServer Pages (JSP) is a Java technology that helps software developers serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </jqxRibbon> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myRibbon') myRibbon: jqxRibbonComponent; ngAfterViewInit(): void { this.myRibbon.setPopupLayout(20,'left',200,400); } }
updateAt	Void	index: Number, item: RibbonItem
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxRibbon #myRibbon [width]="800" [animationType]="'slide'"> <ul style="border-top-left-radius: 0; border-top-right-radius: 0;"> <li style="margin-left: 30px;">Node.js</li> <li style="margin-left: 30px;">JavaServer Pages</li> <li style="margin-left: 30px;">Active Server Pages</li> </ul> <div> <div> Node.js is an event-driven I/O server-side JavaScript environment based on V8..... </div> <div> JavaServer Pages (JSP) is a Java technology that helps software developers serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </jqxRibbon> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myRibbon') myRibbon: jqxRibbonComponent; ngAfterViewInit(): void { this.myRibbon.updateAt(1,Item1); } }
val	String	value: String
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxRibbon #myRibbon [width]="800" [animationType]="'slide'"> <ul style="border-top-left-radius: 0; border-top-right-radius: 0;"> <li style="margin-left: 30px;">Node.js</li> <li style="margin-left: 30px;">JavaServer Pages</li> <li style="margin-left: 30px;">Active Server Pages</li> </ul> <div> <div> Node.js is an event-driven I/O server-side JavaScript environment based on V8..... </div> <div> JavaServer Pages (JSP) is a Java technology that helps software developers serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </jqxRibbon> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myRibbon') myRibbon: jqxRibbonComponent; ngAfterViewInit(): void { let value = this.myRibbon.val(); } }

Properties

Events

Code examples

Code examples

Code examples

Code examples

Methods