Angular UI Components Documentation

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 {
    
}

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 {
    
}

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 {
    
}

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 {
    
}

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 {
    
}

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 {
    
}

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 {
    
}

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 {
    
}

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 {
    
}

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 {
    
}

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 {
    
}

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 {
    
}

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
    }

    
}
							
						

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();
    }

    
}
							
						

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();
    }

    
}
							
						

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();
    }

    
}
							
						

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();
    }

    
}