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" >

    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 {
            constructor() {
                    { text: "snowfall", url: "" },
                    { text: "tablet", url: "" },
                    { text: "nature", url: "" },
                    { text: "card", url: "" },
                    { text: "bird", url: "" },
                    { text: "wheat", url: "" },
                    { text: "night", url: "" }

    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" >

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