Получить длину текста в * ngFor

Question

Я довольно новичок в Angular (8), и я пытаюсь получить длину входного значения, которое я создал в *ngFor, например:

<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>

Как мне получить доступ к длинеpanel.title в моем классе?

Это мой интерфейс / класс

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

   ...

Что мне нужно, чтобы получить длину ввода, набираемого в данный момент?

РЕДАКТИРОВАТЬ

Чтобы прояснить, чего я хочу достичь: я хочу посчитать символы, набранные на входе CURRENT, и вызвать оповещение из класса (не из самого шаблона)

Answer 1

Ваш ngModel должен быть привязан к panels, а не к panel в ngFor. Вы можете сделать это, используя 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>

. Затем запустите оповещение в компоненте, передав индекс, и используйте его, чтобы получить длину заголовка панели. Я использовал здесь событие blur.

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

Answer 2

Попробуйте,

<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="Bezeichnung" [(ngModel)]="panel.title" />
</div>


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

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;
}