How to change Angular 5 Material input placeholder? [duplicate]

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;
}

Answer 2

What options we have?

1. <mat-placeholder> tag is deprecated: https://material.angular.io/components/form-field/api#MatPlaceholder

2. /deep/ selector will be deprecated soon. ::placeholder selector is still experimental feature: https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder

So I would recommend to use input placeholder as an attribute only if your clients have modern browsers.

Answer 3

As @mohit uprim suggested in the answer above, We can use the shadow piercing descendant combinators i.e. /deep/ or ::ng-deep or >>> Below is an example

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

OR

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

Although this method is specified in the angular docs as of now, they have mentioned that this method will soon be deprecated. read more: https://angular.io/guide/component-styles#!#-deep-

According to Angular.io documentation, the proper way of doing this is to change the view encapsulation to none on your component and then writing your custom styles in the css file respective to this component. Please be advised that by doing so, you are moving away from shadow dom and emulated techniques(default in an angular project) which means the styles you specify in this component may propagate to the parent/child components and may mess up the styling there too