All Components

ScrollViewComponent

Represents the Kendo UI ScrollView component for Angular.

@Component({
    selector: 'my-app',
    template: `
      <kendo-scrollview
         [data]="items"
         [width]="width"
         [height]="height"
         [endless]="endless"
         [pageable]="pageable">
        <ng-template let-item="item">
          <h2 class="demo-title">{{item.title}}</h2>
          <img src='{{item.url}}' alt='{{item.title}}' [ngStyle]="{minWidth: width}" draggable="false" />
        </ng-template>
      </kendo-scrollview>
    `,
    styles: [`
      .k-scrollview-wrap {
        margin: 0 auto;
      }
      .demo-title {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: 0;
        padding: 15px;
        color: #fff;
        background-color: rgba(0,0,0,.4);
        text-align: center;
        font-size: 24px;
      }
    `]
})

class AppComponent {
 public width: string = "600px";
 public height: string = "400px";
 public endless: boolean = false;
 public pageable: boolean = false;
 public items: any[] = [
      { title: 'Flower', url: 'http://bit.ly/2cJjYuB' },
      { title: 'Mountain', url: 'http://bit.ly/2cTBNaL' },
      { title: 'Sky', url: 'http://bit.ly/2cJl3Cx' }
 ];
}

Selector

kendo-scrollview

Export Name

Accessible in templates as #kendoScrollViewInstance="kendoScrollView"

Inputs

animate boolean

Enables or disables the built-in animations.
By default, animate is set to true and animations are enabled.

arrows boolean

Enables or disables the built-in navigation arrows.
By default, arrows is set to false and arrows are disabled.

data Array

Provides the data source for the ScrollView.

endless boolean

Enables or disables the endless scrolling mode in which the data source items are endlessly looped.
By default, endless is set to false and the endless scrolling mode is disabled.

height string

Sets the height of the ScrollView.
By default, the height is not set and you have to explicitly define the height value.

pageable boolean

Enables or disables the built-in pager.
By default, pageable is set to false and paging is disabled.

width string

Sets the width of the ScrollView.
By default, the width is not set and you have to explicitly define the width value.

activeIndex number

Represents the current item index.

Events

itemChanged EventEmitter<ItemChangedEvent>

Fires after the current item is changed.

Methods

next

Navigates the ScrollView to the next item.

prev

Navigates the ScrollView to the previous item.

In this article