ScrollViewComponent

Copy Code
@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: 'https://bit.ly/2cJjYuB' },
      { title: 'Mountain', url: 'https://bit.ly/2cTBNaL' },
      { title: 'Sky', url: 'https://bit.ly/2cJl3Cx' }
 ];
}