Implement real-time word counting in Angular as users type

Question

Implement real-time word counting in Angular as users type

I am looking to monitor word count in real-time as a user enters text into a textarea field
If the word limit of 100 is exceeded, further typing should be restricted
I aim to display the word count dynamically as the user types

wordCounter()

 This function calculates the number of words entered in the textarea:
    this.wordCount = this.text ? this.text.split(/\s+/) : 0;
    this.words = this.wordCount ? this.wordCount.length : 0;

  }

This function efficiently counts the words

sample.component.html

<textarea [(ngModel)]="text" ng-change="wordCounter()" id="wmd-input" name="post-text" class="wmd-input s-input bar0 js-post-body-field processed" data-post-type-id="2" cols="92" rows="15" tabindex="101" data-min-length="" oncopy="return false;" onpaste="return false;" oncut="return false;"></textarea>

<div>Words:<span id="wordCount">{{ words }}</span></div>

This snippet showcases the HTML code for monitoring word count. Any advice or guidance on this task is greatly appreciated. Thank you!

angular typescript

Answer 1

Answer №1

To retrieve text from a textarea using the `keydown` event, utilize `ViewChild`

Update: To restrict the input to 100 words, you can disable the textarea by adding `[attr.disabled]="words >100 ? '' : null"`

Sample HTML code:

<textarea [attr.disabled]="words >100 ? '' : null" (keydown)="wordCounter()" #text id="wmd-input" name="post-text" 
class="wmd-input s-input bar0 js-post-body-field processed" data-post-type-id="2" cols="92" rows="15" tabindex="101" data-min-length="" oncopy="return false;" onpaste="return false;" oncut="return false;"></textarea>

    <div>Words:<span id="wordCount">{{ words }}</span></div>

Corresponding TypeScript code:

export class AppComponent {
  wordCount: any;

  @ViewChild("text") text: ElementRef;
  words: any;
  wordCounter() {
    //alert(this.text.nativeElement.value)
    this.wordCount = this.text ? this.text.nativeElement.value.split(/\s+/) : 0;
    this.words = this.wordCount ? this.wordCount.length : 0;
  }
}

View the live demo at https://stackblitz.com/edit/angular-word-count

Answer 2

To retrieve text from a textarea using the `keydown` event, utilize `ViewChild`

Update: To restrict the input to 100 words, you can disable the textarea by adding `[attr.disabled]="words >100 ? '' : null"`

Sample HTML code:

<textarea [attr.disabled]="words >100 ? '' : null" (keydown)="wordCounter()" #text id="wmd-input" name="post-text" 
class="wmd-input s-input bar0 js-post-body-field processed" data-post-type-id="2" cols="92" rows="15" tabindex="101" data-min-length="" oncopy="return false;" onpaste="return false;" oncut="return false;"></textarea>

    <div>Words:<span id="wordCount">{{ words }}</span></div>

Corresponding TypeScript code:

export class AppComponent {
  wordCount: any;

  @ViewChild("text") text: ElementRef;
  words: any;
  wordCounter() {
    //alert(this.text.nativeElement.value)
    this.wordCount = this.text ? this.text.nativeElement.value.split(/\s+/) : 0;
    this.words = this.wordCount ? this.wordCount.length : 0;
  }
}

View the live demo at https://stackblitz.com/edit/angular-word-count

Answer 3

Answer №2

To meet your requirement, you can utilize Angular Reactive Form control along with its disable() function. Here is an example to help you achieve this:

Controller

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'input-autosize-textarea-example',
  templateUrl: './input-autosize-textarea-example.html',
  styleUrls: ['./input-autosize-textarea-example.css'],
})
export class InputAutosizeTextareaExample implements OnInit {
  public remainingWords = 100;

  public textareaForm = new FormGroup ({
    textinput: new FormControl()
  });

  ngOnInit() {
  }

  wordCounter() {
    this.remainingWords = this.textareaForm.value ? 100 - this.textareaForm.value.textinput.split(/\s+/).length : 100;
    if (this.remainingWords <= 0) {
      this.textareaForm.controls['textinput'].disable();
    }
  }
}

Template

<form [formGroup]="textareaForm">
  <textarea 
    formControlName="textinput"
    (keyup)="wordCounter()" 
    id="wmd-input" 
    name="post-text" 
    class="wmd-input s-input bar0 js-post-body-field processed" 
    data-post-type-id="2" 
    cols="92" rows="15" 
    tabindex="101" 
    data-min-length="" 
    oncopy="return false;" 
    onpaste="return false;" 
    oncut="return false;"></textarea>
</form>
<div style="font-style: italic;">
  {{ remainingWords }} words remaining...
</div>
<br>
{{textareaForm?.value | json}}

The ?. operator is known as the safe navigation operator in Angular and it ensures that objects are defined before accessing their properties.

See a working example here: Stackblitz

Answer 4

To meet your requirement, you can utilize Angular Reactive Form control along with its disable() function. Here is an example to help you achieve this:

Controller

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'input-autosize-textarea-example',
  templateUrl: './input-autosize-textarea-example.html',
  styleUrls: ['./input-autosize-textarea-example.css'],
})
export class InputAutosizeTextareaExample implements OnInit {
  public remainingWords = 100;

  public textareaForm = new FormGroup ({
    textinput: new FormControl()
  });

  ngOnInit() {
  }

  wordCounter() {
    this.remainingWords = this.textareaForm.value ? 100 - this.textareaForm.value.textinput.split(/\s+/).length : 100;
    if (this.remainingWords <= 0) {
      this.textareaForm.controls['textinput'].disable();
    }
  }
}

Template

<form [formGroup]="textareaForm">
  <textarea 
    formControlName="textinput"
    (keyup)="wordCounter()" 
    id="wmd-input" 
    name="post-text" 
    class="wmd-input s-input bar0 js-post-body-field processed" 
    data-post-type-id="2" 
    cols="92" rows="15" 
    tabindex="101" 
    data-min-length="" 
    oncopy="return false;" 
    onpaste="return false;" 
    oncut="return false;"></textarea>
</form>
<div style="font-style: italic;">
  {{ remainingWords }} words remaining...
</div>
<br>
{{textareaForm?.value | json}}

The ?. operator is known as the safe navigation operator in Angular and it ensures that objects are defined before accessing their properties.

See a working example here: Stackblitz

Answer 5

Answer №3

For the solution, please refer to this link: https://codesandbox.io/s/damp-mountain-0vpe3

Simply follow these steps:

In your app.module.ts:

import { FormsModule } from "@angular/forms"
Add FormsModule to the imports array like this -
imports: [BrowserModule, FormsModule]

Next, implement ngModel binding in app.component.html

<div>
  <div>
    <h2>Enter text here:</h2>
    <input type="text" [(ngModel)]="myText" placeholder="Type here..." />
  </div>
  <br /><br />
  <div class="wordCount">
    <div>
      Your Text: <span><b> {{myText}} </b></span> <br />
      <br />
      Count: <span><b> {{myText.length}} </b></span>
    </div>
  </div>
</div>

Screenshot:-

https://i.sstatic.net/ebN7p.png

Answer 6

For the solution, please refer to this link: https://codesandbox.io/s/damp-mountain-0vpe3

Simply follow these steps:

In your app.module.ts:

import { FormsModule } from "@angular/forms"
Add FormsModule to the imports array like this -
imports: [BrowserModule, FormsModule]

Next, implement ngModel binding in app.component.html

<div>
  <div>
    <h2>Enter text here:</h2>
    <input type="text" [(ngModel)]="myText" placeholder="Type here..." />
  </div>
  <br /><br />
  <div class="wordCount">
    <div>
      Your Text: <span><b> {{myText}} </b></span> <br />
      <br />
      Count: <span><b> {{myText.length}} </b></span>
    </div>
  </div>
</div>

Screenshot:-

https://i.sstatic.net/ebN7p.png

Implement real-time word counting in Angular as users type

Answer №1

Answer №2

Answer №3

Similar questions

What methods can I use to dismantle an Angular component?

What is the reason behind the failure of a react factory method compilation when extending a typescript class, despite it working perfectly fine on the base class?

Problem with Typescript: The type '{ x;y }' is required to have a '[Symbol.iterator]()' method

Every time a new message is sent or received, I am automatically brought back to the top of the screen on the

Unable to utilize the Object.values method with an object in TypeScript

Error Passing Data to Child Component in Typescript on Next.JS 14 Compilation

Attempting to execute the command "ionic serve" results in the display of various error messages

What is the best way to implement a switch case for the value of a property within an object in a TypeScript file?

What steps should I take to resolve the error message "ESLint encountered an issue determining the plugin '@typescript-eslint' uniquely"?

Guide to modifying the root directory when deploying a Typescript cloud function from a monorepo using cloud build

How to turn off automatic password suggestions in Chrome and Firefox

What return type should be used when returning `_.orderBy` from a TypeScript function?

Angular predictive text selection menu

Issue with running tests on Angular Material components causing errors

NPM: There are no valid TypeScript file rules specified

Retrieve the object from the data received from the HTTP GET API call

The angular core module is displaying an inaccurate peer dependency warning regarding zone.js

Incorporating Bloodhound into an Angular 2 CLI project

What is the best approach for unit testing with a subscribe in Angular 5?

What methods does TypeScript use to verify primitive types during runtime?