角材料输入占位符颜色更改（如果存在输入值）

Question

I am using angular 5 with material 5.2. I want to change the input field placeholder colour If field is not empty. I can able to change the colour when I focused on field, but not able to change the colour if value exists.

I have tried below code. Its changing all the fields empty and non empty fields. I want to change the colour only non empty fields. Please advice me

::ng-deep .mat-form-field-placeholder{
 color:#2196F3
 }
 ::ng-deep .mat-focused .mat-form-field-placeholder{
  color:#2196F3;
   }
 ::ng-deep .mat-form-field-underline .mat-form-field-ripple{
    background-color:#2196F3;
    }
 ::ng-deep .mat-form-field-underline{
 background-color:#2196F3;
  }

Answer 1

After some research found the below solution. I have added

 <mat-label style="blue">UserName</mat-label>

the floating label is a text label displayed on top of the form field control when the control does not contain any text. By default, when text is present the floating label floats above the form field control. The label for a form field can be defined either through a mat-label element, by setting the placeholder attribute on the form control or using the mat-placeholder element. If there are multiple clashing values (eg a placeholder and a label) the mat-label will take precedence and the placeholder will be shown only when there is no value.