Getting Started

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__