Implementing a Character Counter for the Kendo UI for Angular Editor

Environment

Product

Progress® Kendo UI® for Angular Editor

Description

In my current project, I'm using the Kendo UI for Angular Editor and I need to implement a feature that displays the number of characters the user has entered. How can I implement such a feature for the Editor?

This Knowledge Base article also answers the following questions:

• How can I display the number of characters entered in the Kendo UI for Angular Editor?
• Is there a built-in character counter in the Kendo UI for Angular Editor?
• How to manually implement a character counter in the Kendo UI for Angular Editor?

Solution

To implement a character counting functionality for the Kendo UI for Angular Editor:

1. Handle the built-in valueChange event of the Editor which provides as an argument the currently entered text in HTML format.

   html

   <kendo-editor ... (valueChange)="valueChange($event)"></kendo-editor>

2. Strip the HTML tags from the input to count the characters.

   ts

   public valueChange(e) {
       this.textWithoutTag = e.replace(/<\/?[^>]+(>|$)/g, '');
   }

3. Display the character count in the user interface.

The following example demonstrates the full implementation of the suggested approach.

Change Theme

Theme

Loading ...

Suggested Links

• Kendo UI for Angular Editor Overview
• Kendo UI EditorComponent API
• Character Counter for TextBox in Kendo UI for Angular