Отображать подсказку только на соответствующем фокусе ввода

Question

У меня есть элемент mat-hint, добавленный в мой html.Я хочу отображать подсказку только тогда, когда пользователь фокусируется на соответствующем поле формы и скрывает подсказку при фокусировке.Как добиться этого сценария для всех полей формы.

<mat-hint align="end">Max 50 characters</mat-hint>

Answer 1

Вы можете использовать (focus) и (focusout) со ссылкой под названием focusState

<input name="date" type="text" (focus)="focusState = true" (focusout)="focusState = false">
<mat-hint align="end" *ngIf="focusState">Max 50 characters</mat-hint>

Редактировать

Для обработки нескольких элементов

<div *ngFor="let item of array">
   <input #item name="date" type="text" (focus)="item.alt = true" (focusout)="item.alt = false">
   <mat-hint align="end" *ngIf="item.alt">Max 50 characters</mat-hint>
</div>