Блог

У меня есть проект Angular 8 с угловым материалом, у меня есть форма, и в нее мне нужно добавить поле выбора, которое имеет этот стиль:

Обратите внимание на надпись «Выберите опцию», расположенную в середине строки.

HTML-код:

 <mat-form-field>
  <mat-label> Select an option</mat-label>
  <mat-select>
    <mat-option *ngFor="let type of types" [value]="type">{{type}}</mat-option>
  </mat-select>
</mat-form-field>
  

Код ts:

 types: string[] = [
    'Charmander', 'Bulbasaur', 'Squirtle'
  ];
  

Я нигде не могу найти в документации, как сделать так, чтобы «Выбрать опцию» оставалась в середине строки.
Вот ссылка на stackblitz

Может кто-нибудь мне помочь, пожалуйста?

установите внешний вид на контур, как показано ниже:

 <mat-form-field appearance="outline">
    <mat-label> Select an option</mat-label>
    <mat-select>
        <mat-option *ngFor="let type of types" [value]="type">{{type}}</mat-option>
    </mat-select>
</mat-form-field>