2

I am using two Angular material form components inside one component:

<!-- First input -->
<mat-form-field>
    <mat-label>Password</mat-label>
    <input matInput type="text">
</mat-form-field>

<br>

<!-- Second input -->
<mat-form-field>
    <mat-label>Password</mat-label>
    <input matInput type="text">
</mat-form-field>

Before those input field are focused, they should look this

enter image description here

I need blue color for the first input mat-label when it is focused and label floats at the top left corner.

enter image description here

For second input mat-label, I want black color

enter image description here

Can anyone help me achieve this? Many thanks

Muhammad Hammad
  • 67
  • 2
  • 6
  • 1
    You can assign a class with `[NgClass]` to override the material style. Or, maybe, you can try out `[NgStyle]` but I believe that the ovverride required a `!important` at the end. Also, is up to you to add `/deep/` if you don't want those changes be reflected anywhere else – Jacopo Sciampi Mar 13 '19 at 10:13
  • The labels in the both text fields should still show the 'black' color when they are not focused. Once focused, first one should show blue color and second one should show black color. – Muhammad Hammad Mar 13 '19 at 10:32
  • How about defining a mat-theme for that. You can define it globally or specific to a container – Sharan Mohandas Mar 13 '19 at 12:15

3 Answers3

2

If you want to avoid ::ng-deep, you can apply styles in styles.css

  <mat-form-field class="">
    <input matInput placeholder="Favorite food" value="Sushi">
  </mat-form-field>
  <br>
  <mat-form-field class="red-float">
    <input matInput placeholder="Favorite food" value="Sushi">
  </mat-form-field>

styles.css:

.red-float.mat-focused label{
  color:red !important;
}

Demo

umutesen
  • 2,523
  • 1
  • 27
  • 41
1

Try below.

HTML

 <!-- First input -->
<mat-form-field class="first">
    <mat-label>Enter task 1</mat-label>
    <input matInput type="text">
</mat-form-field>

<br>

<!-- Second input -->
<mat-form-field class="second">
    <mat-label>Enter task 1</mat-label>
    <input matInput type="text">
</mat-form-field>

CSS

mat-form-field.mat-focused:first-child mat-label{
  color:rgb(0, 255, 55);
}


mat-form-field.mat-focused:last-child mat-label{
  color:red;
}
Hardik Patel
  • 3,868
  • 1
  • 23
  • 37
1

You can use the directive ::ng-deep in CSS to style child component.

But in your context the input is part of your component so you can select it with mat-form-field input[matInput] {}

Martin Paucot
  • 1,191
  • 14
  • 30
  • I have tried ::ng-deep .mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label { color : blue; } but it applies the styles globally for each form input field in the project. I need to apply the styles individually. I dont work to work with angular material theme as they are also applied globally – Muhammad Hammad Mar 13 '19 at 10:34
  • This is normal, add a class to your `mat-form-field` or your `input[matInput]` and select it, it should look like this : `::ng-deep mat-form-field.input-blue .mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label { color : blue; } ` – Martin Paucot Mar 13 '19 at 10:58
  • `ng-deep` will be deprecated in future versions of Angular. https://stackoverflow.com/questions/47024236/what-to-use-in-place-of-ng-deep – carkod Mar 13 '19 at 11:13
  • Keep using ::ng-deep and its alternatives until a replacement is created. – Martin Paucot Mar 13 '19 at 11:23
  • Thanks @MartinPaucot. Your suggestion worked with a slight change. ::ng-deep .input-blue.mat-form-field.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label { color : blue; } Many thanks – Muhammad Hammad Mar 13 '19 at 12:22