0.0.31 • Published 2 years ago
strongmind-angular-component-suite v0.0.31
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 -saveBasic 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' |
0.0.31
2 years ago