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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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
    }

    
}
							
						

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
    }

    
}
							
						

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
    }

    
}
							
						

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
    }

    
}
							
						

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

    
}
							
						

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

    
}
							
						

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

    
}
							
						

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

    
}
							
						

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

    
}
							
						

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

    
}
							
						

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

    
}
							
						

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

    
}
							
						

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

    
}
							
						

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

    
}
							
						

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

    
}
							
						

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

    
}
							
						

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

    
}
							
						

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

    
}