New to Kendo UI for Angular? Start a free 30-day trial

ScrollViewComponent

Component

Represents the Kendo UI ScrollView component for Angular.

Use the ScrollViewComponent to display a horizontally scrollable list of items. You can customize the content and navigation.

Definition

Package:@progress/kendo-angular-scrollview

Selector:kendo-scrollview

Export Name:Accessible in templates as #kendoScrollViewInstance="kendoScrollView"

Syntax:

html

<kendo-scrollview [data]="items" [width]="width" [height]="height">
   <ng-template let-item="item">
      <h2>{{item.title}}</h2>
      <img width="100%" [src]="item.url" />
   </ng-template>
</kendo-scrollview>

Inputs

activeIndex

number

Sets the current item index (see example).

Default:

animate

boolean

Enables or disables built-in animations (see example).

Default:

true

arrows

boolean

Enables or disables the built-in navigation arrows (see example).

Default:

false

data

any[]

Provides the data source for the ScrollView (see example).

Default:

[]

endless

boolean

Enables or disables endless scrolling mode, where items loop endlessly (see example).

Default:

false

height

string

Sets the height of the ScrollView (see example). By default, the height is not set and must be explicitly defined.

pageable

boolean

Enables or disables the built-in pager (see example).

Default:

false

pagerOverlay

ScrollViewPagerOverlay

Sets the pager overlay style to dark, light, or none.

Default:

'none'

width

string

Sets the width of the ScrollView (see example). By default, the width is not set and must be explicitly defined.

Events

activeIndexChange

EventEmitter<number>

Fires after the activeIndex has changed. Allows for two-way binding of the activeIndex property.

itemChanged

EventEmitter<ItemChangedEvent>

Fires after the current item is changed.

Methods

Navigates the ScrollView to the next item.

Navigates the ScrollView to the previous item.