Angular Material Textarea Character Count

By Arvind Rai, April 17, 2024

In Angular Material, text area is created using <textarea> element with matInput attribute.
To find the character count of textarea, access the text using template variable, NgModel or FormControl and then find the length of text using JavaScript length property of string.
To limit the number of characters, use maxLength validation.

Using Template Variable

Here I will use template variable to access textarea value.

<textarea matInput #myText></textarea>

myText is the template variable. Access textarea value as below.

{{myText.value.length}}

In the above code, we will get character count whenever we write anything in text area.
To limit the number of characters, specify maxLength as below.

<textarea matInput maxLength="30" #myText></textarea>

In this case, we can display message for remaining characters out of max length.

<p> {{30 - myText.value.length}} / 30 </p>

Using NgModel

Here I will use NgModel to access textarea value.
TS code:

msgCharLength = 30;
comment = "";

HTML code:

<textarea matInput [maxLength]="msgCharLength" [(ngModel)] = "comment"></textarea>

Display character count as below.

{{msgCharLength - comment.length}} / {{msgCharLength}}

Using FormControl

Here I will use FormControl to access textarea value.
TS code:

desc = new FormControl("", [Validators.maxLength(this.msgCharLength)]);

HTML code:

<textarea matInput [formControl]="desc"></textarea>

Display character count as below.

{{desc.value?.length}}

We can also display error message if character count exceeds the limit.

<div *ngIf="desc.hasError('maxlength')" class="error"> 
  Character exceeded.
</div>

Example

Find a complete demo to count characters of textarea.
user.component.html

<h3>1. With template variable</h3>
<mat-form-field>
  <mat-label>Message: </mat-label>
  <textarea matInput [maxLength]="msgCharLength" placeholder="Write Here" #myText></textarea>
</mat-form-field>
<p>Character count: {{myText.value.length}} </p>
<p>Remaining character: {{msgCharLength - myText.value.length}} / {{msgCharLength}} </p>

<h3>2. With NgModel</h3>
<mat-form-field>
  <mat-label>Comment: </mat-label>
  <textarea matInput [maxLength]="msgCharLength" [(ngModel)]="comment" placeholder="Write Here"></textarea>
</mat-form-field>
<p>Character count: {{comment.length}} </p>
<p>Remaining character: {{msgCharLength - comment.length}} / {{msgCharLength}} </p>

<h3>3. With FormControl</h3>
<mat-form-field>
  <mat-label>Description: </mat-label>
  <textarea matInput [formControl]="desc" placeholder="Write Here"></textarea>
</mat-form-field>
<p>Character count: {{desc.value?.length}} </p>
<div *ngIf="desc.hasError('maxlength')" class="error">
  Character exceeded. Max length is {{msgCharLength}}.
</div>

import { Component } from '@angular/core';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { FormControl, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
import { CommonModule } from '@angular/common';

@Component({
    selector: 'app-user',
    standalone: true,
    imports: [MatFormFieldModule, MatInputModule, FormsModule, ReactiveFormsModule, CommonModule],
    templateUrl: './user.component.html'
})
export class UserComponent {
    msgCharLength = 30;
    comment = "";
    desc = new FormControl("", [Validators.maxLength(this.msgCharLength)]);
}

Find the print-screen of the output.

Angular Material Textarea Character Count

Reference

Angular Material Input

POSTED BY

ARVIND RAI

LEARN MORE

JAVA SPRING BOOT ANGULAR Angular Material NGRX JAVASCRIPT ANDROID THYMELEAF FREEMARKER Hibernate Struts 2 Testing MAVEN APACHE API JACKSON API JUNIT 5