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' |