Angular UI Components Documentation

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

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

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

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

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

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

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

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

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

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

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

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

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

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
    }

    
}
							
						

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

    
}
							
						

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

    
}
							
						

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

    
}