Как обновить Mat-Input Placeler на Focus

Question

У меня есть это поле ввода материала, где я хотел бы иметь другой заполнитель, когда пользователь фокусирует ввод.

Когда нет фокуса и нет значения

Когда пользователь фокусирует его

Когда пользователь имеет некоторую ценность и фокусирует его

Есть ли событие или обходной путь в материале для достижения того же.

<mat-form-field class="example-full-width">
    <input matInput #message maxlength="256" placeholder="Your Message Goes Here">
  </mat-form-field>

Answer 1

Вы можете сделать это, передав переменную класса вашему placeholder собственность через привязку собственности.

В вашем компоненте создайте переменную свойства со значением по умолчанию

myPlaceholder = 'Your Message Goes Here'

Присвоить переменную свойству [placeholder] и изменить на Message на mat-form-field щелчок

<mat-form-field class="example-full-width" (click)="myPlaceholder = 'Message'">
    <input matInput [placeholder]="myPlaceholder">
  </mat-form-field>

Stackblitz

https://stackblitz.com/edit/angular-fsbbzr?embed=1&file=app/input-overview-example.ts