How to change Angular 5 Material input placeholder?
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;
}
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