How to change Angular 5 Material input placeholder?

Question

How do you change the placeholder color on an angular/material input placeholder?

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

Answer 1

To change the color of placeholder, override the color property of .mat-form-field-placeholder like:

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

  color:red;
}

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

  color:red;
}

To change the color of underline:

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

  background-color:red;
}

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

  background-color:red;
}

This works perfect. Demo: https://plnkr.co/edit/yF4kXJ500YzefLOnLKNe?p=preview