Properties

NameTypeDefault
disabled Boolean false

Sets or gets the disabled property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxScrollBar #myScrollBar
            [width]="18" [height]="280" [min]="0" [max]="1000" [disabled]="true">
        </jqxScrollBar>
    `
})
 
export class AppComponent {
    
}
height String | Number null

Sets or gets the height property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxScrollBar #myScrollBar
            [width]="18" [height]="280" [min]="0" [max]="1000">
        </jqxScrollBar>
    `
})
 
export class AppComponent {
    
}
largestep Number 50

Sets or gets the largestep property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxScrollBar #myScrollBar
            [width]="18" [height]="280" [min]="0" [max]="1000" [largestep]="100">
        </jqxScrollBar>
    `
})
 
export class AppComponent {
    
}
min Number 0

Sets or gets the min property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxScrollBar #myScrollBar
            [width]="18" [height]="280" [min]="0" [max]="1000">
        </jqxScrollBar>
    `
})
 
export class AppComponent {
    
}
max Number 1000

Sets or gets the max property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxScrollBar #myScrollBar
            [width]="18" [height]="280" [min]="0" [max]="1000">
        </jqxScrollBar>
    `
})
 
export class AppComponent {
    
}
rtl Boolean false

Sets or gets the rtl property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxScrollBar #myScrollBar
            [width]="18" [height]="280" [min]="0" [max]="1000" [rtl]="true">
        </jqxScrollBar>
    `
})
 
export class AppComponent {
    
}
step Number 10

Sets or gets the step property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxScrollBar #myScrollBar
            [width]="18" [height]="280" [min]="0" [max]="1000" [step]="20">
        </jqxScrollBar>
    `
})
 
export class AppComponent {
    
}
showButtons Boolean true

Sets or gets the showButtons property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxScrollBar #myScrollBar
            [width]="18" [height]="280" [min]="0" [max]="1000" [showButtons]="false">
        </jqxScrollBar>
    `
})
 
export class AppComponent {
    
}
thumbMinSize Number 10

Sets or gets the thumbMinSize property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxScrollBar #myScrollBar
            [width]="18" [height]="280" [min]="0" [max]="1000" [thumbMinSize]="5">
        </jqxScrollBar>
    `
})
 
export class AppComponent {
    
}
theme String ''

Sets or gets the theme property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxScrollBar #myScrollBar
            [width]="18" [height]="280" [min]="0" [max]="1000" [theme]="'energyblue'">
        </jqxScrollBar>
    `
})
 
export class AppComponent {
    
}
vertical Boolean false

Sets or gets the vertical property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxScrollBar #myScrollBar
            [width]="18" [height]="280" [min]="0" [max]="1000" [vertical]="true">
        </jqxScrollBar>
    `
})
 
export class AppComponent {
    
}
value Number 0

Sets or gets the value property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxScrollBar #myScrollBar
            [width]="18" [height]="280" [min]="0" [max]="1000" [value]="20">
        </jqxScrollBar>
    `
})
 
export class AppComponent {
    
}
width String | Number null

Sets or gets the width property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxScrollBar #myScrollBar
            [width]="18" [height]="280" [min]="0" [max]="1000">
        </jqxScrollBar>
    `
})
 
export class AppComponent {
    
}

Events

valueChanged Event

This event is triggered when the value is changed.

Code examples

Bind to the valueChanged event of jqxScrollBar. 

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxScrollBar #myScrollBar(onValueChanged)="ValueChanged($event)"
            [width]="18" [height]="280" [min]="0" [max]="1000">
        </jqxScrollBar>
    `
})
 
export class AppComponent {
    ValueChanged(event: any): void 
    {
        // Do Something
    }

    
}

Methods

NameReturn TypeArguments
destroy Void None 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxScrollBar #myScrollBar
            [width]="18" [height]="280" [min]="0" [max]="1000">
        </jqxScrollBar>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myScrollBar') myScrollBar: jqxScrollBarComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myScrollBar.destroy();
    }

    
}
isScrolling Boolean None 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxScrollBar #myScrollBar
            [width]="18" [height]="280" [min]="0" [max]="1000">
        </jqxScrollBar>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myScrollBar') myScrollBar: jqxScrollBarComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myScrollBar.isScrolling();
    }

    
}
setPosition Void index: Number 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxScrollBar #myScrollBar
            [width]="18" [height]="280" [min]="0" [max]="1000">
        </jqxScrollBar>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myScrollBar') myScrollBar: jqxScrollBarComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myScrollBar.setPosition(10);
    }

    
}