Determine the character count of the text within an *ngFor loop

Question

Determine the character count of the text within an *ngFor loop

I am a beginner in Angular (8) and I am trying to determine the length of the input value that I have created using a *ngFor loop as shown below:

<div *ngFor="let panel of panels; index as i" class="panel" [id]="'panel-' + panel.id">
    <div>{{ panel.title }}</div>
    <input matInput placeholder="Bezeichnung" [(ngModel)]="panel.title" />
</div>

How can I access the character length of the panel.title from my component?

This is my interface/class structure:

export interface ProgressbarStepData {
    id: number;
    title: string;
    color: string;
    order: number;
}

export class ProgressbarEditorComponent implements OnInit {
    public panels: Array<ProgressbarStepData> = [];

   ...

What do I need to do in order to get the character length of the input currently being typed in?

EDIT

To clarify, I want to be able to count the characters being typed in the current input field and trigger an alert from within the component, not directly from the template.

javascript angular typescript angular-reactive-forms angular8

Answer 1

Answer №1

Make sure your ngModel is bound to the array panels, not just a single element panel in your ngFor loop. Remember to use the index of the iteration to correctly bind the values.

<div *ngFor="let panel of panels; index as i" class="panel" [id]="'panel-' + panel.id">
    <div>{{ panel.title }}</div>
    <input matInput placeholder="Label" [(ngModel)]="panels[i].title" (blur)="showAlert(i)" />
</div>

You can then trigger an alert from the component by passing in the index and accessing the title length of that specific panel. Utilize events like blur for this purpose.

showAlert(index) {
    const titleLength = this.panels[index].title.length;
    // Invoke alert with the title length information.
}

Answer 2

Make sure your ngModel is bound to the array panels, not just a single element panel in your ngFor loop. Remember to use the index of the iteration to correctly bind the values.

<div *ngFor="let panel of panels; index as i" class="panel" [id]="'panel-' + panel.id">
    <div>{{ panel.title }}</div>
    <input matInput placeholder="Label" [(ngModel)]="panels[i].title" (blur)="showAlert(i)" />
</div>

You can then trigger an alert from the component by passing in the index and accessing the title length of that specific panel. Utilize events like blur for this purpose.

showAlert(index) {
    const titleLength = this.panels[index].title.length;
    // Invoke alert with the title length information.
}

Answer 3

Answer №2

Give this a shot,

<div *ngFor="let panel of panels; index as i" class="panel" [id]="'panel-' + panel.id">
    <div>{{ panel.title }}</div>
    <input (change)="onChange({{panel.title}})" matInput placeholder="Description" [(ngModel)]="panel.title" />
</div>


onChange(title) {
          console.log(title.length);
         })

Answer 4

Give this a shot,

<div *ngFor="let panel of panels; index as i" class="panel" [id]="'panel-' + panel.id">
    <div>{{ panel.title }}</div>
    <input (change)="onChange({{panel.title}})" matInput placeholder="Description" [(ngModel)]="panel.title" />
</div>


onChange(title) {
          console.log(title.length);
         })

Answer 5

Answer №3

.html

<input type="text" (input)="inputMthd($event)"  (keyup)="methodCalled($event)">

.ts

inputMthd(e){
console.log(e);
event.target.value.length;
}
methodCalled(e){
console.log(e);
e.target.value.length;
}

Answer 6

.html

<input type="text" (input)="inputMthd($event)"  (keyup)="methodCalled($event)">

.ts

inputMthd(e){
console.log(e);
event.target.value.length;
}
methodCalled(e){
console.log(e);
e.target.value.length;
}

Determine the character count of the text within an *ngFor loop

Answer №1

Answer №2

Answer №3

.html

.ts

Similar questions

Access the session on both routers

Struggling to connect to Node/Express Backend

Passing specific props to child components based on their type in a React application using TypeScript

What is the best way to customize multiple checkboxes in React Native?

Property element does not exist in this basic TypeScript project

Converting an array of objects into an array of Objects containing both individual objects and arrays

Tips for integrating both client-side and server-side validation techniques in your web application

Is it possible to compare escaped data with the unescaped value of a select box in JavaScript?

Mapping type property names in Typescript for substitution

What steps do I need to take to generate a terrain similar to this using Three.js?

Intercepting HTTP responses to handle headers

Sending data through a form using AJAX and PHP

Utilizing the dollar shorthand for jQuery in conjunction with Selenium

Troubleshooting: React js Project console.logs are not being displayed in the browser's

Injecting CSS styles into a webpage using a Chrome extension before the page has completely loaded to achieve instant customization

How can you utilize both defineProps with TypeScript and set default values in Vue 3 setup? (Typescript)

Navigating the path for the script src dynamically with the help of Angular.js and Javascript

What is the best method to retrieve the current time in minutes using the Timer component?

Upload the image data into the input file tag

Instructions for utilizing a non-string reference without triggering flow errors