Due to a bug introduced in latest zone.js changes, spinner demos are disabled temporarily.
import {Spinner} from 'primeng/primeng';
Two-way value binding is defined using standard ngModel directive.
<p-spinner size="30" [(ngModel)]="val"></p-spinner>
Spinner can be used in a model driven form as well by defining ngFormControl or ngControl.
<p-spinner ngControl="age"></p-spinner>
Boundaries are specified with min and max attributes.
<p-spinner size="30" [(ngModel)]="val" [min]="0" [max]="100"></p-spinner>
Step factor is 1 by default and can be customized with step option.
<p-spinner size="30" [(ngModel)]="val" [step]="0.25"></p-spinner>
Name | Type | Default | Description |
---|---|---|---|
step | number | 1 | Step factor to increment/decrement the value. |
min | number | null | Mininum boundary value. |
max | number | null | Maximum boundary value. |
disabled | boolean | false | When present, it specifies that the element should be disabled. |
maxlength | number | null | Maximum number of character allows in the input field. |
size | number | null | Size of the input field. |
Name | Parameters | Description |
---|---|---|
onChange |
event: Change event |
Callback to invoke on value change. |
Following is the list of structural style classes, for theming classes visit theming page.
Name | Element |
---|---|
ui-spinner | Container element |
ui-spinner-up | Up element |
ui-spinner-down | Down button |
Native component that requires the css of PrimeUI Spinner.
<h3 class="first">Basic</h3>
<p-spinner size="30" [(ngModel)]="val1"></p-spinner>
<h3>Min/Max</h3>
<p-spinner size="30" [(ngModel)]="val2" [min]="0" [max]="100"></p-spinner>
<h3>Step</h3>
<p-spinner size="30" [(ngModel)]="val3" [step]="0.25"></p-spinner>
<h3>Disabled</h3>
<p-spinner size="30" [(ngModel)]="val4" [disabled]="true"></p-spinner>
export class SpinnerDemo {
val1: number;
val2: number;
val3: number;
val4: number = 100;
}