@angular-material-extensions/input-counter

Modern number input component built with angular and material design

Usage no npm install needed!

<script type="module">
  import angularMaterialExtensionsInputCounter from 'https://cdn.skypack.dev/@angular-material-extensions/input-counter';
</script>

README

angular-material-extensions's logo

@angular-material-extensions/input-counter - Autocomplete input component for google-maps built with angular material design

npm version npm demo Join the chat at https://gitter.im/angular-material-extensions/Lobby Coverage Status Build Status CircleCI branch dependency Status devDependency Status Greenkeeper Badge license Awesome

@angular-material-extensions/input-counter

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

View all the directives and components in action at https://angular-material-extensions.github.io/input-counter

Dependencies

  • Angular (requires Angular 2 or higher | we are using already V9 ;)

Installation

1. Install via ng add. (Recommended)

If Angular Material Design is not setup, just run ng add @angular/material learn more

Now add the library via the angular schematics and everything will be setup for you

ng add @angular-material-extensions/input-counter

2. Install via npm. (Alternative)

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()
    });

@angular-material-extensions/input-counter

@angular-material-extensions/input-counter

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

  1. clone this repo
  2. Install the dependencies by running npm i
  3. go to lib directory under projects/angular-material-extensions/input-counter
  4. build the library npm run build

Other Angular Libraries

Support

Built by and for developers :heart: we will help you :punch:

License

Copyright (c) 2020 Anthony Nahas. Licensed under the MIT License (MIT)