Q:

Get length of text in *ngFor

I am fairly new to Angular (8) and I try to get the length of the input value, which I created in a *ngFor like this:
<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 would I access the length of the panel.title in my class?
This is my interface/class
export interface ProgressbarStepData {
    // Each progressbar step is represented by an instance of this data type.
    id: number; // Unique ID
    title: string; // The label that is displayed as the step title.
    color: string; // Hex code of the colored markings associated with this step. Only visible in Builder, not Viewer.
    order: number; // Denotes which step this is (from step 1 to <number of steps>)
}

export class ProgressbarEditorComponent implements OnInit {
    public panels: Array<ProgressbarStepData> = []; // One panel for each existing progressbar step

   ...

What would I need to get the length of the input currently typing in?
EDIT
To clarify what I want to achieve: I want to count the characters typed in the CURRENT input and trigger an alert from the class (not from the template itself)

A:

Your ngModel needs to be bound to panels not to panel in the ngFor. You can do this using the index.
<div *ngFor="let panel of panels; index as i" class="panel" [id]="'panel-' + panel.id">
    <div>{{ panel.title }}</div>
    <input matInput placeholder="Bezeichnung" [(ngModel)]="panels[i].title" (blur)="showAlert(i)" />
</div>

Then trigger the alert in the component by passing in the index and use that to get the length of the panel title. I have used the blur event here.
showAlert(index) {
    const titleLength = this.panels[index].title.length;
    // Call alert with the length of the title here.
}

