How to Change Material Input Placeholder Color in Angular?

To change a material input placeholder color in Angular, you have to override the default placeholder color by preceding the .mat-input-element class with ::ng-deep.

You just need to put the below code in your component’s CSS file. It will change the input placeholder color to red. Later, you can change it to whatever color you want by just changing the color property’s value:

:host ::ng-deep .mat-input-element::placeholder{
    color: red;

    /* Add other styles */
}

This is how the input will look like after applying the above styles:

You can also add other styles to the placeholder such as font-style, font-size, etc. It’s totally up to you:

:host ::ng-deep .mat-input-element::placeholder{
    color: red;
    font-style: italic;
    font-size: 1.1em;
}

This is how the input element will look like after applying the above styles: