README
Strongmind Angular Component Suite
Strongmind styled, html controls, and components (Angular v2.0.0+)
Requirements
- Angular (2.0.0+)
UI Dependency
- None (Twitter Bootstrap v3+ - Recommended)
Installation
npm install sm-angular-component-suite -save
Basic usage
Import desired [components] in your app.module
and add it to the declarations array.
Alternatively, you can import desired [components] to a shared module, to make it available across all modules in your Angular application.
Example usage (NumberPickerComponent)
...
import { NumberPickerComponent } from 'sm-angular-component-suite/components';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent,
NumberPickerComponent
],
imports: [
...
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Add the strongmind-number-picker
directive to the page where you want to use the number picker.
Quickest way to use numberpicker
<strongmind-number-picker [(pickerValue)]="pickerValue"></strongmind-number-picker>
Or, to update just some option values
<strongmind-number-picker [numberPickerOption]="{ min: 0, max: 20 }" [(pickerValue)]="pickerValue"></strongmind-number-picker>
Or to modify all/any numberpicker options
<strongmind-number-picker [numberPickerOption]="numberPickerOptions" [(pickerValue)]="pickerValue"></strongmind-number-picker>
Directive Inputs and Outputs
Attribute | Type | Required | Default | Description |
---|---|---|---|---|
pickerValue | (Input) Number | Yes | The value of the number picker from parent component. | |
numberPickerOptions | (Input) [NumberPickerOption] | No | object | The strongly typed object to define options for picker. |
min | Number | No | 0 | The minimal number limit on the number picker. |
max | Number | No | 100 | The maximum number limit on the number picker. |
step | Number | No | 1 | The step value for the number picker. |
acceptNull | Boolean | No | false | Defines if the picker should allow the user to leave the input empty, if false, a number will be expected. |
showValidation | Boolean | No | true | Defines if the picker should show validation errors, if false, the input will reset to a previous value on invalid state instead of showing the error. |
showAllErrors | Boolean | No | false | Defines if all errors will be shown on invalid picker state, if false, only the first error will be shown (business value - limited client area). |
pickerCss | String | No | 'input-group' | Defines the picker css. Overrideable to add custom styles. The picker follows 'Twitter Bootstrap' standards. |
buttonCss | String | No | 'btn btn-secondary' | Defines the picker button css. Overrideable to add custom styles. The picker buttons follow 'Twitter Bootstrap' standards. |
buttonIconDecrease | String | No | Defines a picker button icon for decrease. If set, will render icon in decrease button. | |
buttonIconIncrease | String | No | Defines a picker button icon for increase. If set, will render icon in increase button. | |
inputDisabled | Boolean | No | false | Defines if the picker should be disabled for the user if true. |
inputWidth | Number | No | Defines a picker inputs specific width. | |
errorMessages | NumberPickerErrorMessage | Defines error messages for invalid states. | ||
invalidNumber | String | No | 'Invalid Number' | |
invalidMin | String | No | 'Invalid min value' | |
invalidMax | String | No | 'Invalid max value' | |
invalidStep | String | No | 'Invalid step value' | |
invalidEmpty | String | No | 'Value cannot be empty' |