Angle 5の変更方法Material input placeholder？

Question

角度/マテリアル入力プレースホルダのプレースホルダ色はどのように変更しますか？

<mat-form-field> 
    <input matInput placeholder="Name"> 
    </mat-form-field> 

Answer 1

よう.MAT-フォームフィールドプレースホルダの色プロパティをオーバーライド、プレースホルダの色を変更する：下線の色を変更する

::ng-deep .mat-form-field-placeholder{ 

    color:red; 
} 

::ng-deep .mat-focused .mat-form-field-placeholder{ 

    color:red; 
} 

：

::ng-deep .mat-form-field-underline .mat-form-field-ripple{ 

    background-color:red; 
} 

::ng-deep .mat-form-field-underline{ 

    background-color:red; 
} 

これは完璧に動作します。 デモ：https://plnkr.co/edit/yF4kXJ500YzefLOnLKNe?p=preview

Answer 2

角材自体はスタイルを設定するための指示を提供しません。これは古い学校に行く必要があります。入力要素にid/classを与え、擬似クラス（:: placeholder）を使用します。参考 ：@mohitは上記の回答で示唆したようuprim https://css-tricks.com/almanac/selectors/p/placeholder/

Answer 3

、我々はピアス子孫コンビネータすなわち/深い/または影を使用することができます:: NG-深いまたは以下>>>一例である

/deep/ .mat-form-field-placeholder { 
    color: #fff; // choose the color you want 
} 

OR

>>> .mat-form-field-placeholder { 
    color:red; 
} 

このメソッドは現在の角度ドキュメントで指定されていますが、このメソッドは間もなく廃止される予定です。 続きを読む：https://angular.io/guide/component-styles#!#-deep-

はAngular.io文書によると、これを行うための適切な方法は、このコンポーネントへの個々のCSSファイルでカスタムスタイルを書いて、あなたのコンポーネントになしにビューのカプセル化を変更することです。その結果、シャドードームとエミュレートされたテクニック（角型プロジェクトのデフォルト）からこのコンポーネントで指定したスタイルが親子コンポーネントに伝播する可能性があることを意味します。そのスタイリングもある

Answer 4

example codeにある材料2自体によって提供される1つの解決策。私はここでサンプルを行っている：

<mat-form-field> 
    <mat-label>Input</mat-label> 
    <input matInput > 
</mat-form-field> 

Plunker