### File

`src/number-input/number.component.ts`

### Description

See demo

../../iframe.html?id=number--basic

### Implements

`ControlValueAccessor`

### Metadata

providers | `{ provide: NG_VALUE_ACCESSOR, useExisting: NumberComponent, multi: true }`
selector | `ibm-number`
template |
    <label *ngIf="skeleton && label" class="bx--label bx--skeleton"></label>
    <label *ngIf="!skeleton && label" [for]="id" class="bx--label">
    	<ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container>
    	<ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>
    </label>
    <div *ngIf="helperText" class="bx--form__helper-text">
    	<ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>
    	<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>
    </div>
    <div
    	data-numberinput
    	[attr.data-invalid]="(invalid ? true : null)"
    	class="bx--number"
    	[ngClass]="{
    		'bx--number--light': theme === 'light',
    		'bx--number--nolabel': !label,
    		'bx--number--helpertext': helperText,
    		'bx--skeleton' : skeleton
    	}">
    	<div class="bx--number__input-wrapper">
    		<input
    			type="number"
    			[id]="id"
    			[value]="value"
    			[attr.min]="min"
    			[attr.max]="max"
    			[disabled]="disabled"
    			[required]="required"
    			(input)="onNumberInputChange($event)"/>
    		<ibm-icon-warning-filled16
    			*ngIf="!skeleton && invalid"
    			class="bx--number__invalid"
    			style="display: inherit;">
    		</ibm-icon-warning-filled16>
    		<div *ngIf="!skeleton" class="bx--number__controls">
    			<button
    				class="bx--number__control-btn up-icon"
    				type="button"
    				aria-live="polite"
    				aria-atomic="true"
    				[attr.aria-label]="getIncrementLabel() | async"
    				(click)="onIncrement()">
    				<ibm-icon-caret-up16></ibm-icon-caret-up16>
    			</button>
    			<button
    				class="bx--number__control-btn down-icon"
    				type="button"
    				aria-live="polite"
    				aria-atomic="true"
    				[attr.aria-label]="getDecrementLabel() | async"
    				(click)="onDecrement()">
    				<ibm-icon-caret-down16></ibm-icon-caret-down16>
    			</button>
    		</div>
    	</div>
    	<div *ngIf="invalid" class="bx--form-requirement">
    		<ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>
    		<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
    	</div>
    </div>

### Index

###### Properties
Protected _decrementLabel Protected _incrementLabel Protected _value Static numberCount onTouched propagateChange
###### Methods
emitChangeEvent getDecrementLabel getIncrementLabel Public isTemplate onDecrement onIncrement onNumberInputChange Public registerOnChange Public registerOnTouched setDisabledState Public writeValue
###### Inputs
decrementLabel disabled helperText id incrementLabel invalid invalidText label max min required skeleton theme value
###### Outputs
change
###### HostBindings
class.bx--form-item
###### Accessors
value decrementLabel incrementLabel

### Constructor

`constructor(i18n: I18n)`
Defined in src/number-input/number.component.ts:198
Creates an instance of `Number`. Parameters :
Name | Type | Optional
i18n | `I18n` | No

### Inputs

`decrementLabel` |
Defined in src/number-input/number.component.ts:178

`disabled` | Set to `true` for a disabled number input. Default value : `false`
Defined in src/number-input/number.component.ts:120

`helperText` | Sets the optional helper text. Type : `string | TemplateRef<any>`
Defined in src/number-input/number.component.ts:166

`id` | The unique id for the number component. Default value : ``number-${NumberComponent.numberCount}``
Defined in src/number-input/number.component.ts:132

`incrementLabel` |
Defined in src/number-input/number.component.ts:187

`invalid` | Set to `true` for an invalid number component. Default value : `false`
Defined in src/number-input/number.component.ts:128

`invalidText` | Sets the invalid text. Type : `string | TemplateRef<any>`
Defined in src/number-input/number.component.ts:170

`label` | Sets the text inside the `label` tag. Type : `string | TemplateRef<any>`
Defined in src/number-input/number.component.ts:162

`max` | Sets the max attribute on the `input` element. Default value : `null`
Defined in src/number-input/number.component.ts:158

`min` | Sets the min attribute on the `input` element. Default value : `null`
Defined in src/number-input/number.component.ts:154

`required` | Reflects the required attribute of the `input` element. Type : `boolean`
Defined in src/number-input/number.component.ts:136

`skeleton` | Set to `true` for a loading number component. Default value : `false`
Defined in src/number-input/number.component.ts:124

`theme` | `light` or `dark` number input theme. Type : `"light" | "dark"` Default value : `"dark"`
Defined in src/number-input/number.component.ts:116

`value` | Sets the value attribute on the `input` element. Type : `any`
Defined in src/number-input/number.component.ts:140

### Outputs

`change` | Emits event notifying other classes when a change in state occurs in the input. `$event` Type: `EventEmitter`
Defined in src/number-input/number.component.ts:175

### HostBindings

class.bx--form-item
`class.bx--form-item: ```
Default value : `true`
Defined in src/number-input/number.component.ts:111

### Methods

emitChangeEvent
`emitChangeEvent()`
Defined in src/number-input/number.component.ts:278
Creates a class of `NumberChange` to emit the change in the `Number`. Returns : `void`

getDecrementLabel
`getDecrementLabel()`
Defined in src/number-input/number.component.ts:267
Returns : `Observable<string>`

getIncrementLabel
`getIncrementLabel()`
Defined in src/number-input/number.component.ts:271
Returns : `Observable<string>`

Public isTemplate
`isTemplate(value)`
Defined in src/number-input/number.component.ts:291
Parameters :
Name | Optional
value | No
Returns : `boolean`

onDecrement
`onDecrement()`
Defined in src/number-input/number.component.ts:260
Subtracts 1 to the current `value`. Returns : `void`

onIncrement
`onIncrement()`
Defined in src/number-input/number.component.ts:250
Adds 1 to the current `value`. Returns : `void`

onNumberInputChange
`onNumberInputChange(event)`
Defined in src/number-input/number.component.ts:286
Parameters :
Name | Optional
event | No
Returns : `void`

Public registerOnChange
`registerOnChange(fn: any)`
Defined in src/number-input/number.component.ts:218
Sets a method in order to propagate changes back to the form. Parameters :
Name | Type | Optional
fn | `any` | No
Returns : `void`

Public registerOnTouched
`registerOnTouched(fn: any)`
Defined in src/number-input/number.component.ts:226
Registers a callback to be triggered when the control has been touched. Parameters :
Name | Type | Optional | Description
fn | `any` | No | `Callback to be triggered when the number input is touched.`
Returns : `void`

setDisabledState
`setDisabledState(isDisabled: boolean)`
Defined in src/number-input/number.component.ts:233
Sets the disabled state through the model Parameters :
Name | Type | Optional
isDisabled | `boolean` | No
Returns : `void`

Public writeValue
`writeValue(value: any)`
Defined in src/number-input/number.component.ts:211
This is the initial value set to the component Parameters :
Name | Type | Optional | Description
value | `any` | No | `The input value.`
Returns : `void`

### Properties

Protected _decrementLabel
`_decrementLabel: `Overridable``
Type : `Overridable`
Default value : `this.i18n.getOverridable("NUMBER.DECREMENT")`
Defined in src/number-input/number.component.ts:197

Protected _incrementLabel
`_incrementLabel: `Overridable``
Type : `Overridable`
Default value : `this.i18n.getOverridable("NUMBER.INCREMENT")`
Defined in src/number-input/number.component.ts:198

Protected _value
`_value: `number``
Type : `number`
Default value : `0`
Defined in src/number-input/number.component.ts:195

Static numberCount
`numberCount: `number``
Type : `number`
Default value : `0`
Defined in src/number-input/number.component.ts:109
Variable used for creating unique ids for number input components.

onTouched
`onTouched: `function``
Type : `function`
Default value : `() => { }`
Defined in src/number-input/number.component.ts:240
Called when number input is blurred. Needed to properly implement `ControlValueAccessor`.

propagateChange
`propagateChange: ```
Default value : `(_: any) => { }`
Defined in src/number-input/number.component.ts:245
Method set in `registerOnChange` to propagate changes back to the form.

### Accessors

value
get `value()`
Defined in src/number-input/number.component.ts:148
set `value(v: any)`
Defined in src/number-input/number.component.ts:140
Sets the value attribute on the `input` element. Parameters :
Name | Type | Optional
v | `any` | No
Returns : `void`

decrementLabel
get `decrementLabel()`
Defined in src/number-input/number.component.ts:182
set `decrementLabel(value)`
Defined in src/number-input/number.component.ts:178
Parameters :
Name | Optional
value | No
Returns : `void`

incrementLabel
get `incrementLabel()`
Defined in src/number-input/number.component.ts:191
set `incrementLabel(value)`
Defined in src/number-input/number.component.ts:187
Parameters :
Name | Optional
value | No
Returns : `void`

    import {
    	Component,
    	Input,
    	HostBinding,
    	EventEmitter,
    	Output,
    	TemplateRef
    } from "@angular/core";
    import { NG_VALUE_ACCESSOR, ControlValueAccessor } from "@angular/forms";

    import { I18n, Overridable } from "../i18n/i18n.module";
    import { Observable } from "rxjs";

    /**
     * Used to emit changes performed on number input components.
     */
    export class NumberChange {
    	/**
    	 * Contains the `Number` that has been changed.
    	 */
    	source: NumberComponent;
    	/**
    	 * The value of the `Number` field encompassed in the `NumberChange` class.
    	 */
    	value: number;
    }

    /**
     * [See demo](../../?path=/story/number--basic)
     *
     * <example-url>../../iframe.html?id=number--basic</example-url>
     */
    @Component({
    	selector: "ibm-number",
    	template: `
    		<label *ngIf="skeleton && label" class="bx--label bx--skeleton"></label>
    		<label *ngIf="!skeleton && label" [for]="id" class="bx--label">
    			<ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container>
    			<ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>
    		</label>
    		<div *ngIf="helperText" class="bx--form__helper-text">
    			<ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>
    			<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>
    		</div>
    		<div
    			data-numberinput
    			[attr.data-invalid]="(invalid ? true : null)"
    			class="bx--number"
    			[ngClass]="{
    				'bx--number--light': theme === 'light',
    				'bx--number--nolabel': !label,
    				'bx--number--helpertext': helperText,
    				'bx--skeleton' : skeleton
    			}">
    			<div class="bx--number__input-wrapper">
    				<input
    					type="number"
    					[id]="id"
    					[value]="value"
    					[attr.min]="min"
    					[attr.max]="max"
    					[disabled]="disabled"
    					[required]="required"
    					(input)="onNumberInputChange($event)"/>
    				<ibm-icon-warning-filled16
    					*ngIf="!skeleton && invalid"
    					class="bx--number__invalid"
    					style="display: inherit;">
    				</ibm-icon-warning-filled16>
    				<div *ngIf="!skeleton" class="bx--number__controls">
    					<button
    						class="bx--number__control-btn up-icon"
    						type="button"
    						aria-live="polite"
    						aria-atomic="true"
    						[attr.aria-label]="getIncrementLabel() | async"
    						(click)="onIncrement()">
    						<ibm-icon-caret-up16></ibm-icon-caret-up16>
    					</button>
    					<button
    						class="bx--number__control-btn down-icon"
    						type="button"
    						aria-live="polite"
    						aria-atomic="true"
    						[attr.aria-label]="getDecrementLabel() | async"
    						(click)="onDecrement()">
    						<ibm-icon-caret-down16></ibm-icon-caret-down16>
    					</button>
    				</div>
    			</div>
    			<div *ngIf="invalid" class="bx--form-requirement">
    				<ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>
    				<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
    			</div>
    		</div>
    	`,
    	providers: [
    		{
    			provide: NG_VALUE_ACCESSOR,
    			useExisting: NumberComponent,
    			multi: true
    		}
    	]
    })
    export class NumberComponent implements ControlValueAccessor {
    	/**
    	 * Variable used for creating unique ids for number input components.
    	 */
    	static numberCount = 0;

    	@HostBinding("class.bx--form-item") containerClass = true;

    	/**
    	 * `light` or `dark` number input theme.
    	 */
    	@Input() theme: "light" | "dark" = "dark";
    	/**
    	 * Set to `true` for a disabled number input.
    	 */
    	@Input() disabled = false;
    	/**
    	 * Set to `true` for a loading number component.
    	 */
    	@Input() skeleton = false;
    	/**
    	 * Set to `true` for an invalid number component.
    	 */
    	@Input() invalid = false;
    	/**
    	 * The unique id for the number component.
    	 */
    	@Input() id = `number-${NumberComponent.numberCount}`;
    	/**
    	 * Reflects the required attribute of the `input` element.
    	 */
    	@Input() required: boolean;
    	/**
    	 * Sets the value attribute on the `input` element.
    	 */
    	@Input() set value(v: any) {
    		if (v === "" || v === null) {
    			this._value = null;
    			return;
    		}
    		this._value = Number(v);
    	}

    	get value() {
    		return this._value;
    	}
    	/**
    	 * Sets the min attribute on the `input` element.
    	 */
    	@Input() min = null;
    	/**
    	 * Sets the max attribute on the `input` element.
    	 */
    	@Input() max = null;
    	/**
    	 * Sets the text inside the `label` tag.
    	 */
    	@Input() label: string | TemplateRef<any>;
    	/**
    	 * Sets the optional helper text.
    	 */
    	@Input() helperText: string | TemplateRef<any>;
    	/**
    	 * Sets the invalid text.
    	 */
    	@Input() invalidText: string | TemplateRef<any>;

    	/**
    	 * Emits event notifying other classes when a change in state occurs in the input.
    	 */
    	@Output() change = new EventEmitter<NumberChange>();

    	@Input()
    	set decrementLabel(value: string | Observable<string>) {
    		this._decrementLabel.override(value);
    	}

    	get decrementLabel() {
    		return this._decrementLabel.value;
    	}

    	@Input()
    	set incrementLabel(value: string | Observable<string>) {
    		this._incrementLabel.override(value);
    	}

    	get incrementLabel() {
    		return this._incrementLabel.value;
    	}

    	protected _value = 0;

    	protected _decrementLabel: Overridable = this.i18n.getOverridable("NUMBER.DECREMENT");
    	protected _incrementLabel: Overridable = this.i18n.getOverridable("NUMBER.INCREMENT");

    	/**
    	 * Creates an instance of `Number`.
    	 */
    	constructor(protected i18n: I18n) {
    		NumberComponent.numberCount++;
    	}

    	/**
    	 * This is the initial value set to the component
    	 * @param value The input value.
    	 */
    	public writeValue(value: any) {
    		this.value = value;
    	}

    	/**
    	 * Sets a method in order to propagate changes back to the form.
    	 */
    	public registerOnChange(fn: any) {
    		this.propagateChange = fn;
    	}

    	/**
    	 * Registers a callback to be triggered when the control has been touched.
    	 * @param fn Callback to be triggered when the number input is touched.
    	 */
    	public registerOnTouched(fn: any) {
    		this.onTouched = fn;
    	}

    	/**
    	 * Sets the disabled state through the model
    	 */
    	setDisabledState(isDisabled: boolean) {
    		this.disabled = isDisabled;
    	}

    	/**
    	 * Called when number input is blurred. Needed to properly implement `ControlValueAccessor`.
    	 */
    	onTouched: () => any = () => { };

    	/**
    	 * Method set in `registerOnChange` to propagate changes back to the form.
    	 */
    	propagateChange = (_: any) => { };

    	/**
    	 * Adds 1 to the current `value`.
    	 */
    	onIncrement(): void {
    		if (this.max === null || this.value < this.max) {
    			this.value++;
    			this.emitChangeEvent();
    		}
    	}

    	/**
    	 * Subtracts 1 to the current `value`.
    	 */
    	onDecrement(): void {
    		if (this.min === null || this.value > this.min) {
    			this.value--;
    			this.emitChangeEvent();
    		}
    	}

    	getDecrementLabel(): Observable<string> {
    		return this._decrementLabel.subject;
    	}

    	getIncrementLabel(): Observable<string> {
    		return this._incrementLabel.subject;
    	}

    	/**
    	 * Creates a class of `NumberChange` to emit the change in the `Number`.
    	 */
    	emitChangeEvent(): void {
    		let event = new NumberChange();
    		event.source = this;
    		event.value = this.value;
    		this.change.emit(event);
    		this.propagateChange(this.value);
    	}

    	onNumberInputChange(event) {
    		this.value = event.target.value;
    		this.emitChangeEvent();
    	}

    	public isTemplate(value) {
    		return value instanceof TemplateRef;
    	}
    }
    export { NumberComponent as Number };

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""