Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 58 Commits
.circleci		.circleci
.github		.github
assets		assets
e2e		e2e
projects/angular-material-extensions/input-counter		projects/angular-material-extensions/input-counter
src		src
.browserslistrc		.browserslistrc
.editorconfig		.editorconfig
.gitignore		.gitignore
CHANGELOG.md		CHANGELOG.md
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
angular.json		angular.json
karma.conf.js		karma.conf.js
package-lock.json		package-lock.json
package.json		package.json
server.ts		server.ts
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.server.json		tsconfig.server.json
tsconfig.spec.json		tsconfig.spec.json
tslint.json		tslint.json

Repository files navigation

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

Built by and for developers ❤️

Do you have any question or suggestion ? Please do not hesitate to contact us!Alternatively, provide a PR | open an appropriate issuehere

If did you like this project, supportangular-material-extensionsby starring ⭐ and sharing it 📢

Demo

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

Dependencies

Angular (requires Angular

1. Install vianpm.

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)

angular material theme

SystemJS

Note:If you are usingSystemJS, 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 slightlydifferent 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]})exportclassAppModule{}

Other modules in your application can simply importMatInputCounterModule:

import{MatInputCounterModule}from'@angular-material-extensions/input-counter';@NgModule({declarations:[OtherComponent, ...],imports:[MatInputCounterModule, ...],})exportclassOtherModule{}

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-counterformControlName="inputCounter"[min]="+options.min"[max]="+options.max"[step]="+options.step"[label]="options.label"[placeholder]="options.placeholder"></mat-input-counter></form>

formGroup:FormGroup;this.formGroup=newFormGroup({inputCounter:newFormControl()});

API - for more info please visit the official documentationMaps 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