How do I change md-input-container placeholder color using css in angular material?

Question

How do I change md-input-container placeholder color using css in Angular Material? As screenshot below I have phone no. and password textfield. Phone no. textfield has Phone No. and password has Password placeholder name.

Answer 1

in the last version of angular you can remove the placeholder in the input and add a mat-placeholder in the mat-form-field and custom the css with a class

html :

<mat-form-field>
    <input matInput type="text">
    <mat-placeholder class="placeholder">Search</mat-placeholder>
</mat-form-field>

css:

.mat-focused .placeholder {
    color: #00D318;
}