Angular / Materialのマットフォームフィールド入力-フローティングラベルの問題

Question

次のコードスニペットのラベルとしてプレースホルダーが浮動しないようにする方法はありますか？

<form class="search-form">
  <mat-form-field class="example-full-width">
     <input class="toolbar-search" type="text" matInput>
     <mat-placeholder>Search</mat-placeholder>
     <mat-icon matSuffix style="font-size: 1.2em">search</mat-icon>
  </mat-form-field>
</form>

角度/マテリアルの公式ドキュメントを見てきましたが、この機能は現在廃止されているようです。

Answer 1

1. mat-form-fieldでfloatLabel = "never"を使用します

<mat-form-field floatLabel="never">
</mat-form-field>

Answer 2

<div class="custom_autosuggestion">
   <mat-form-field class="example-full-width" floatLabel="never">
      <input class="custom_color_title"
      aria-label="Number" matInput [formControl]="myColorControl" type="text" name=""                                                  [matAutocomplete]="auto">
      <mat-placeholder class="custom_placeholder">{{templateParse.Search_Colors_by_Name_or_Code}}</mat-placeholder>
      <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option of filteredColorOptions | async" [value]="option">
                                                        <!-- {{option}} -->
      </mat-option>
      </mat-autocomplete>
   </mat-form-field>
</div>