CODEWITHSUNDEEP
angularangular-material
lmngn23
lmngn23

Reputation: 521

How to change color of matInput if it's populated

I have this template for matInput

 <mat-form-field class="group-name" [color]="groupWithSameName ? 'warn' : 'accent'">
    <input [title]="groupWithSameName ? 'The name already exists' : ''" [(ngModel)]="groupName" (ngModelChange)="getGroupWithSameName()" matInput>
  </mat-form-field>

However, the input will change the color only when I click on it, is there anyway that I could make it changes the color without clicking? Like I just want it to change the color when it's populated.

Upvotes: 1

Views: 619

Answers (1)

kushal Baldev
kushal Baldev

Reputation: 769

You just need an extra variable to check if the input field is filled or not and two css classes

For example in css file make these two classes

 .warn{
    color:yellow;
}

. accent{
   color:green;
}

Now in html file in the input field define the change event like and need to use

  <input   #searchBox  
  [ngClass]="isValuePresent?'accent': 'warn'"
  (change)="somethingChanged(searchBox.value)">


             Or 


<input #searchBox (keyup)="search(searchBox.value)"
    [ngClass]="isValuePresent ? 'accent' : 'warn'">

So in ts file you need to define one variable like isValuePresent like

public isValuePresent=false;

public search(searchedValue:String){
// Set the variable based on value by checking is string 
empty
}

Just showed it as a simple example in mat-input just put ngclass where you have color directive and in the input field define the change function your work will be done...!!

And you need to pass the value by passing input reference as I showed by #

Hope this works for you just approve it if works and upvote it too. :)

Upvotes: 1

Related Questions