Как изменить положение заполнителя Angular Material в angular8?

Question

Я имею angular8 проект, в котором у меня есть angular material. Я используюmat-autocompleteдля автозаполнения ввода. Вот код моего html

<form class="example-form">
  <mat-form-field class="example-full-width dummy-input-field" floatLabel="never">
    <input matInput class="custom-input" placeholder="State"  [matAutocomplete]="auto" [formControl]="stateCtrl">
  </mat-form-field>
  <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let state of filteredStates | async" [value]="state.name">
        <img class="example-option-img" aria-hidden [src]="state.flag" height="25">
        <span>{{state.name}}</span> |
        <small>Population: {{state.population}}</small>
      </mat-option>
    </mat-autocomplete>
</form>

Вот моя полная ссылка на Stackblitz, чтобы продемонстрировать мою проблему. Внутри ввода есть заполнитель с надписью "Состояние". Я хочу позиционировать этоplaceholder в вертикальной середине ввода, как обычные поля ввода Html.

Как я могу изменить положение angular material позиция заполнителя ввода?

Answer 1

Попробуй это

stack blitz рабочая демонстрация

выполнить начальные шаги углового материала и импортировать требуемые зависимости

Надеюсь, это поможет