| Name | Type | Default |
|---|
|
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 {
}
|
|
|
|
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
}
}
|
|
|
| Name | Return Type | Arguments |
|---|
|
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);
}
}
|