https://github.com/maddeveloper/ng4-input-counter

https://github.com/maddeveloper/ng4-input-counter

Last synced: 1 day ago
JSON representation

• Host: GitHub
• URL: https://github.com/maddeveloper/ng4-input-counter
• Owner: MadDeveloper
• License: mit
• Created: 2017-06-16T09:32:13.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-07-06T10:13:01.000Z (over 7 years ago)
• Last Synced: 2025-01-22T18:16:20.036Z (1 day ago)
• Language: JavaScript
• Size: 29.3 KB
• Stars: 1
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.MD
  • License: LICENSE

Awesome Lists containing this project

README

        
# ng4-input-counter

A very cool input which display characters counter and can be configured to display counter bounds.

## Normal

![](http://g.recordit.co/VtQnGdw6eX.gif)

## Maxlength

![](http://g.recordit.co/KAVkmjZBxO.gif)

## Minlength

![](http://g.recordit.co/Ww5C5R8B4Z.gif)

## Both

![](http://g.recordit.co/5XUR8OArww.gif)

## Installation

To install the library, run:

```bash

$ npm install ng4-input-counter --save

```

and then from your Angular module

```typescript

import { InputCounterModule } from 'ng4-input-counter';

@NgModule({

  ...

  imports: [

    ...

    InputCounterModule.forRoot()

  ],

  ...

})

export class AppModule { }

```

## How to use

```xml

    

    

```

### With Bootstrap

```xml



    

    



```


## API of input-counter

**`ngModel: any`**

**`id: string`**

**`type: string = 'text'`**

**`className: string`**

> `className` (like the React way) has been used instead of `class` because of it being a reserved keyword in JavaScript and TypeScript.

**`name: string`**

**`placeholder: string = ''`**

**`maxlength: number`**

**`minlength: number`**

**`pattern: string`**

**`disabled: boolean = false`**

**`required: boolean = false`**

**`readonly: boolean = false`**

You can also bind all angular input events handler, like `(focus)`, `(blur)`, `(keyup)`, `(keydown)`, etc.

## License

MIT © [maddeveloper](https://github.com/MadDeveloper)