Как настроить поле ввода Angular Material Design в Angular 5

Question

Я работаю в приложении Angular 5, здесь я использую Angular Material Design для пользовательского интерфейса.

Теперь я хочу создать входной файл, как на изображении

Я не знаю, как добавить метку «Изменить» внутри поля ввода.

Stackblitz: https://stackblitz.com/edit/angular-stacb4-5oaagd?file=app%2Fsnack-bar-overview-example.html

app.component.html

<mat-form-field class="col-sm-12">
    <mat-label>Enter your email</mat-label>
    <input matInput placeholder="email" required>
</mat-form-field>

Может кто-нибудь помочь мне решить эту проблему.

Answer 1

вы можете использовать как это,

<mat-form-field class="col-sm-12">
    <mat-label>Enter your email</mat-label>
    <input #inp matInput placeholder="email" required>
   <span matSuffix class="lbl" (click)="inp.value = ''">change</span>
</mat-form-field>

и style.css

.lbl {
   color: #1787dc;
   cursor: pointer;
}

Stackblitz демо

Answer 2

попробуйте это, если вам нужно что-то вроде этого

<mat-form-field class="col-sm-12">
    <mat-label matSuffix >Enter your email</mat-label>
  <a matSuffix > change ? </a>
    <input matInput placeholder="email" required>
</mat-form-field>

Answer 3

используйте matSuffix для этого

<mat-form-field class="col-sm-12">
    <mat-label>Enter your email</mat-label>
    <input matInput placeholder="email" required>
  <button matSuffix (click)="getData()">Change</button>
</mat-form-field>