Displaying an Image Counter Inside the ScrollView

Updated on Feb 20, 2026

Environment

Product

Progress® Kendo UI® for Angular ScrollView

Description

How can I display a dynamic image counter inside the Kendo UI for Angular ScrollView component?

Solution

To display a counter that shows the current image position out of the total number of images, handle the activeIndexChange event and use an ng-template to render the counter in the slide.

1. Bind the activeIndexChange event to update a component property that tracks the current slide index.

   html

   <kendo-scrollview
       [data]="items"
       [activeIndex]="activeIndex"
       (activeIndexChange)="handleItemChange($event)"
   >

2. In the event handler, increment the index by one because activeIndexChange emits a zero-based value.

   typescript

   public index = 1;
   
   public handleItemChange(e: number): void {
       this.index = e + 1;
   }

3. Add a counter element inside the ng-template of the ScrollView. Use the index property and the data collection length to display the current position.

   html

   <ng-template let-item="item">
       <div class="slide-wrapper">
           <img src="{{ item.url }}" alt="{{ item.title }}" draggable="false" />
           <div class="counter-badge">{{ index }} / {{ items.length }}</div>
       </div>
   </ng-template>

The following example demonstrates the full implementation of the suggested approach.

Change Theme

Theme

Loading ...