Getting Started

8 Jun 20172 minutes to read

This section helps to get started of the Rotator component in a Angular application

Create a Rotator

The following step by step guidelines will help you to add a Rotator component.

Refer the common Angular Getting Started Documentation to create an application and add necessary scripts and styles for rendering Essential JavaScript controls.

Create a simple Angular Rotator by adding ej-rotator attribute for initializing an empty Rotator component to the application.

HTML

<ul ej-rotator width="500px" height="150px" slideWidth="600px" slideHeight="300px" >
    </ul>

Configure data

To configure images for Rotator component, define data in an object array and fields in the component’s constructor file.

TS

export class AppComponent {
        data:array;
        fieldList:object;
        autoPlay:boolean;
        constructor() {
            this.data=[
                { text: "snowfall", url: "http://js.syncfusion.com/demos/web/content/images/rotator/snowfall.jpg" },
                { text: "tablet", url: "http://js.syncfusion.com/demos/web/content/images/rotator/tablet.jpg" },
                { text: "nature", url: "http://js.syncfusion.com/demos/web/content/images/rotator/nature.jpg" },
                { text: "card", url: "http://js.syncfusion.com/demos/web/content/images/rotator/card.jpg" },
                { text: "bird", url: "http://js.syncfusion.com/demos/web/content/images/rotator/bird.jpg" },
                { text: "wheat", url: "http://js.syncfusion.com/demos/web/content/images/rotator/wheat.jpg" },
                { text: "night", url: "http://js.syncfusion.com/demos/web/content/images/rotator/night.jpg" }
            ];
            this.fieldList={text:"text",url:"url"};
            this.autoPlay=true;   
        }
    }

Now assign the defined variables to field and dataSource properties. Add required properties to the component.

HTML

<ul ej-rotator [dataSource]="data" [fields]="fieldList" [showPlayButton]="autoPlay" slideWidth="600px" slideHeight="300px" >
    </ul>

Note: You can find the Rotator properties from the API reference document__