@angular-material-extensions/input-counter
v1.0.1
Published
Modern number input component built with angular and material design
Downloads
17
Maintainers
Readme
@angular-material-extensions/input-counter - Autocomplete input component for google-maps built with angular material design
Built by and for developers :heart:
Do you have any question or suggestion ? Please do not hesitate to contact us! Alternatively, provide a PR | open an appropriate issue here
If did you like this project, support angular-material-extensions by starring :star: and sharing it :loudspeaker:
Table of Contents
- Demo
- Dependencies
- Peer Dependencies
- Additional Requirements - material (Include a theme)
- Installation
- Usage
- Documentation
- Development
- Other Angular Libraries
- Support
- License
Demo
View all the directives and components in action at https://angular-material-extensions.github.io/input-counter
Dependencies
- Angular (requires Angular
Installation
1. Install via npm.
Now install @angular-material-extensions/input-counter
via:
npm install --save @angular-material-extensions/input-counter
Requirements (peer dependencies):
for the ui input component, please consider to install the following packages
npm i @angular/cdk @angular/material @angular/animations @angular/forms
Additional requirements Theme (Material Design)
SystemJS
Note:If you are using
SystemJS
, you should adjust your configuration to point to the UMD bundle. In your systemjs config file,map
needs to tell the System loader where to look for@angular-material-extensions/input-counter
:
{
'@angular-material-extensions/input-counter';: 'node_modules/@angular-material-extensions/input-counter/bundles/input-counter.umd.js',
}
Once installed you need to import the main module:
import { MatInputCounterModule } from '@angular-material-extensions/input-counter';
The only remaining part is to list the imported module in your application module. The exact method will be slightly
different for the root (top-level) module for which you should end up with the code similar to (notice MatInputCounterModule.forRoot()
):
import { MatInputCounterModule } from '@angular-material-extensions/input-counter';
@NgModule({
declarations: [AppComponent, ...],
imports: [
MatInputCounterModule, ...],
bootstrap: [AppComponent]
})
export class AppModule {
}
Other modules in your application can simply import MatInputCounterModule
:
import { MatInputCounterModule } from '@angular-material-extensions/input-counter';
@NgModule({
declarations: [OtherComponent, ...],
imports: [
MatInputCounterModule, ...],
})
export class OtherModule {
}
Usage
mat-input-counter
<mat-input-counter [min]="1"
[max]="10"
[step]="0.5"
[label]="Your label"
placeholder="your place holder">
</mat-input-counter>
With Reactive forms
<form [formGroup]="formGroup">
<mat-input-counter formControlName="inputCounter"
[min]="+options.min"
[max]="+options.max"
[step]="+options.step"
[label]="options.label"
[placeholder]="options.placeholder">
</mat-input-counter>
</form>
formGroup: FormGroup;
this.formGroup = new FormGroup({
inputCounter: new FormControl()
});
API - for more info please visit the official documentation Maps JavaScript API
matGoogleMapsAutocomplete
| option | bind | type | default | description |
|:-------------------|:--------:|:------:|:------------:|:-------------------------------------------------------------------------------------------------|
| value | Input()
| number
; | - | the value of the component (number)
| min | Input()
| number
; | - | The minimum value that the counter can have.
| max | Input()
| number
; | - | The maximum value that the counter can have.
| step | Input()
| number
| - | The values at which the thumb will snap.
| label | Input()
| string
| - | Label of the form field
| placeholder | Input()
| string
| - | Placeholder of the form field
| change | Output()
| number
| - | event when the input form value changed
Documentation
Please checkout the full documentation here
Development
- clone this repo
- Install the dependencies by running
npm i
- go to lib directory under
projects/angular-material-extensions/input-counter
- build the library
npm run build
Other Angular Libraries
- ngx-auth-firebaseui
- ngx-linkifyjs
- @firebaseui/ng-bootstrap
- @angular-material-extensions/pages
- @angular-material-extensions/link-preview
- @angular-material-extensions/password-strength
- @angular-material-extensions/google-maps-autocomplete
- @angular-material-extensions/select-country
- @angular-material-extensions/fab-menu
- @angular-material-extensions/faq
- @angular-material-extensions/contacts
Support
- Drop an email to: Anthony Nahas
- or open an appropriate issue
- let us chat on Gitter
Built by and for developers :heart: we will help you :punch:
License
Copyright (c) 2020 Anthony Nahas. Licensed under the MIT License (MIT)