TextCharacterCounter

An Angular library that provides a simple character counter directive for text inputs and textareas.
Perfect for showing users how many characters they’ve typed, and warning them when they approach a limit.

📦 Installation

Install the library via npm:

npm install text-character-counter

🚀 Usage

A. Standalone Components (Recommended)

Simply import the TextCharacterCounterDirective into your component's imports array.

// app.component.ts (Standalone)
import { Component } from '@angular/core';
import { TextCharacterCounterDirective } from 'text-character-counter';

@Component({
  standalone: true,
  selector: 'app-root',
  template: `
    <input class="form-control" autocomplete="off" name="fullname" type="text" [(ngModel)]="fullname"
      [maxlength]="10" [ktrTextCharacterCounter]="10" #formUsername="ngModel"
      msgDisplayType="block" msgTextAlign="right" msgHiddenType="visibility"
      [msgWarningColor]="'red'">
  `,
  imports: [TextCharacterCounterDirective]
})
export class AppComponent {}

B. Traditional NgModules

Import the TextCharacterCounterModule into your feature module's imports array.

// app.module.ts (Traditional)
import { NgModule } from '@angular/core';
import { TextCharacterCounterModule } from 'text-character-counter';

@NgModule({
  imports: [
    // ... other modules
    TextCharacterCounterModule
  ],
  // ...
})
export class AppModule {}

⚙️ Character Counter Configuration

This package provides customizable settings to configure a character counter feature for input fields. Below are the available properties you can use.

Properties

| Property | Type | Default | Description | |--------------------------------------|---------|----------|-----------------------------------------------------------------------------| | ktrTextCharacterCounter | number | - | The maximum number of characters allowed in the counter. | | msgHiddenType | string | display| Controls the way to hide the counter message. Set to display or visibility. | | msgDisplayType | string | block | Defines the display type of the counter. Accepts none, inline, inline-block, or block. | | msgFontSize | string | inherit| Specifies the font size of the counter message. | | msgTextAlign | string | right | Specifies the alignment of the counter message text. | | msgMarginTop | string | 5px | Defines the margin from the top of the counter message. | | msgWarningColor | string | #f43995| The color of the warning message when character limit is exceeded. | | msgCharLimitWarningThreshold | number | 5 | Defines the threshold of remaining characters. If the limit is exceeded, the warning color will be shown. | | showMsgText | boolean | TRUE | Determines whether the "Characters Left" message is displayed. | | showMsgOnDirty | boolean | TRUE | Specifies if the message should appear only when the input field is dirty. | | showMsgWarningColor | boolean | TRUE | Determines whether the warning color should activate when the character count exceeds the threshold. |

Notes

• You can customize the appearance and behavior of the character counter using these properties.
• The msgWarningColor property allows you to define a custom color for the warning message, which appears when the character limit is nearing.