Angular ScrollView API Reference

Name	Type	Default
animationDuration	Number	30
Sets or gets the `animationDuration` property. import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScrollView #myScrollView [width]="600" [height]="450" [buttonsOffset]="[0, 0]" [animationDuration]="3000"> <div><div class="photo" style="background-image: url(../images/imageNature1.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature2.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature3.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature4.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature5.jpg)"></div></div> </jqxScrollView>, styles: [` .photo { width: 600px; height: 450px; background-color: #000; background-position: center; background-repeat: no-repeat; } `], encapsulation: ViewEncapsulation.None ` }) export class AppComponent { }
bounceEnabled	Boolean	true
Sets or gets the `bounceEnabled` property. import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScrollView #myScrollView [width]="600" [height]="450" [buttonsOffset]="[0, 0]" [bounceEnabled]="false"> <div><div class="photo" style="background-image: url(../images/imageNature1.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature2.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature3.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature4.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature5.jpg)"></div></div> </jqxScrollView>, styles: [` .photo { width: 600px; height: 450px; background-color: #000; background-position: center; background-repeat: no-repeat; } `], encapsulation: ViewEncapsulation.None ` }) export class AppComponent { }
buttonsOffset	Array<Number>	[0, 0]
Sets or gets the `buttonsOffset` property. import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScrollView #myScrollView [width]="600" [height]="450" [buttonsOffset]="[0, 0]"> <div><div class="photo" style="background-image: url(../images/imageNature1.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature2.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature3.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature4.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature5.jpg)"></div></div> </jqxScrollView>, styles: [` .photo { width: 600px; height: 450px; background-color: #000; background-position: center; background-repeat: no-repeat; } `], encapsulation: ViewEncapsulation.None ` }) export class AppComponent { }
currentPage	Number	0
Sets or gets the `currentPage` property. import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScrollView #myScrollView [width]="600" [height]="450" [buttonsOffset]="[0, 0]" [currentPage]="1"> <div><div class="photo" style="background-image: url(../images/imageNature1.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature2.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature3.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature4.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature5.jpg)"></div></div> </jqxScrollView>, styles: [` .photo { width: 600px; height: 450px; background-color: #000; background-position: center; background-repeat: no-repeat; } `], encapsulation: ViewEncapsulation.None ` }) export class AppComponent { }
disabled	Boolean	false
Sets or gets the `disabled` property. import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScrollView #myScrollView [width]="600" [height]="450" [buttonsOffset]="[0, 0]" [disabled]="true"> <div><div class="photo" style="background-image: url(../images/imageNature1.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature2.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature3.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature4.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature5.jpg)"></div></div> </jqxScrollView>, styles: [` .photo { width: 600px; height: 450px; background-color: #000; background-position: center; background-repeat: no-repeat; } `], encapsulation: ViewEncapsulation.None ` }) export class AppComponent { }
height	String \| Number	320
Sets or gets the `height` property. import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScrollView #myScrollView [width]="600" [height]="450" [buttonsOffset]="[0, 0]"> <div><div class="photo" style="background-image: url(../images/imageNature1.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature2.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature3.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature4.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature5.jpg)"></div></div> </jqxScrollView>, styles: [` .photo { width: 600px; height: 450px; background-color: #000; background-position: center; background-repeat: no-repeat; } `], encapsulation: ViewEncapsulation.None ` }) export class AppComponent { }
moveThreshold	Number	0.5
Sets or gets the `moveThreshold` property. import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScrollView #myScrollView [width]="600" [height]="450" [buttonsOffset]="[0, 0]" [moveThreshold]="1"> <div><div class="photo" style="background-image: url(../images/imageNature1.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature2.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature3.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature4.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature5.jpg)"></div></div> </jqxScrollView>, styles: [` .photo { width: 600px; height: 450px; background-color: #000; background-position: center; background-repeat: no-repeat; } `], encapsulation: ViewEncapsulation.None ` }) export class AppComponent { }
showButtons	Boolean	true
Sets or gets the `showButtons` property. import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScrollView #myScrollView [width]="600" [height]="450" [buttonsOffset]="[0, 0]" [showButtons]="false"> <div><div class="photo" style="background-image: url(../images/imageNature1.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature2.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature3.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature4.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature5.jpg)"></div></div> </jqxScrollView>, styles: [` .photo { width: 600px; height: 450px; background-color: #000; background-position: center; background-repeat: no-repeat; } `], encapsulation: ViewEncapsulation.None ` }) export class AppComponent { }
slideShow	Boolean	true
Sets or gets the `slideShow` property. import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScrollView #myScrollView [width]="600" [height]="450" [buttonsOffset]="[0, 0]" [slideShow]="false"> <div><div class="photo" style="background-image: url(../images/imageNature1.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature2.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature3.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature4.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature5.jpg)"></div></div> </jqxScrollView>, styles: [` .photo { width: 600px; height: 450px; background-color: #000; background-position: center; background-repeat: no-repeat; } `], encapsulation: ViewEncapsulation.None ` }) export class AppComponent { }
slideDuration	"Number,	3000
Sets or gets the `slideDuration` property. import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScrollView #myScrollView [width]="600" [height]="450" [buttonsOffset]="[0, 0]" [slideDuration]="300"> <div><div class="photo" style="background-image: url(../images/imageNature1.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature2.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature3.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature4.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature5.jpg)"></div></div> </jqxScrollView>, styles: [` .photo { width: 600px; height: 450px; background-color: #000; background-position: center; background-repeat: no-repeat; } `], encapsulation: ViewEncapsulation.None ` }) export class AppComponent { }
theme	String	''
Sets or gets the `theme` property. import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScrollView #myScrollView [width]="600" [height]="450" [buttonsOffset]="[0, 0]" [theme]="'energyblue'"> <div><div class="photo" style="background-image: url(../images/imageNature1.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature2.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature3.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature4.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature5.jpg)"></div></div> </jqxScrollView>, styles: [` .photo { width: 600px; height: 450px; background-color: #000; background-position: center; background-repeat: no-repeat; } `], encapsulation: ViewEncapsulation.None ` }) export class AppComponent { }
width	String \| Number	320
Sets or gets the `width` property. import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScrollView #myScrollView [width]="600" [height]="450" [buttonsOffset]="[0, 0]"> <div><div class="photo" style="background-image: url(../images/imageNature1.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature2.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature3.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature4.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature5.jpg)"></div></div> </jqxScrollView>, styles: [` .photo { width: 600px; height: 450px; background-color: #000; background-position: center; background-repeat: no-repeat; } `], encapsulation: ViewEncapsulation.None ` }) export class AppComponent { }
Events
pageChanged	Event
This event is triggered when the current page is changed. Code examples Bind to the `pageChanged` event of jqxScrollView. import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScrollView #myScrollView(onPageChanged)="PageChanged($event)" [width]="600" [height]="450" [buttonsOffset]="[0, 0]"> <div><div class="photo" style="background-image: url(../images/imageNature1.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature2.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature3.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature4.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature5.jpg)"></div></div> </jqxScrollView>, styles: [` .photo { width: 600px; height: 450px; background-color: #000; background-position: center; background-repeat: no-repeat; } `], encapsulation: ViewEncapsulation.None ` }) export class AppComponent { PageChanged(event: any): void { // Do Something } }
Methods
Name	Return Type	Arguments
back	Void	None
import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScrollView #myScrollView [width]="600" [height]="450" [buttonsOffset]="[0, 0]"> <div><div class="photo" style="background-image: url(../images/imageNature1.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature2.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature3.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature4.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature5.jpg)"></div></div> </jqxScrollView>, styles: [` .photo { width: 600px; height: 450px; background-color: #000; background-position: center; background-repeat: no-repeat; } `], encapsulation: ViewEncapsulation.None ` }) export class AppComponent implements AfterViewInit { @ViewChild('myScrollView') myScrollView: jqxScrollViewComponent; ngAfterViewInit(): void { this.myScrollView.back(); } }
changePage	Void	index: Number
import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScrollView #myScrollView [width]="600" [height]="450" [buttonsOffset]="[0, 0]"> <div><div class="photo" style="background-image: url(../images/imageNature1.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature2.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature3.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature4.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature5.jpg)"></div></div> </jqxScrollView>, styles: [` .photo { width: 600px; height: 450px; background-color: #000; background-position: center; background-repeat: no-repeat; } `], encapsulation: ViewEncapsulation.None ` }) export class AppComponent implements AfterViewInit { @ViewChild('myScrollView') myScrollView: jqxScrollViewComponent; ngAfterViewInit(): void { this.myScrollView.changePage(); } }
forward	Void	None
import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScrollView #myScrollView [width]="600" [height]="450" [buttonsOffset]="[0, 0]"> <div><div class="photo" style="background-image: url(../images/imageNature1.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature2.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature3.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature4.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature5.jpg)"></div></div> </jqxScrollView>, styles: [` .photo { width: 600px; height: 450px; background-color: #000; background-position: center; background-repeat: no-repeat; } `], encapsulation: ViewEncapsulation.None ` }) export class AppComponent implements AfterViewInit { @ViewChild('myScrollView') myScrollView: jqxScrollViewComponent; ngAfterViewInit(): void { this.myScrollView.forward(); } }
refresh	Void	None
import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxScrollView #myScrollView [width]="600" [height]="450" [buttonsOffset]="[0, 0]"> <div><div class="photo" style="background-image: url(../images/imageNature1.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature2.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature3.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature4.jpg)"></div></div> <div><div class="photo" style="background-image: url(../images/imageNature5.jpg)"></div></div> </jqxScrollView>, styles: [` .photo { width: 600px; height: 450px; background-color: #000; background-position: center; background-repeat: no-repeat; } `], encapsulation: ViewEncapsulation.None ` }) export class AppComponent implements AfterViewInit { @ViewChild('myScrollView') myScrollView: jqxScrollViewComponent; ngAfterViewInit(): void { this.myScrollView.refresh(); } }

Properties

Events

Code examples

Methods