How to change color on selected index change of dropdown inside angular material table

Bug, feature request, or proposal:

Bug.

What is the expected behavior?

It should change the color

What is the current behavior?

It is not changing.

###Approach

In my angular material table there are two dropdowns whose OnChange method gives an output of YES/NO. Now, what i want is, if both the selected indexes are NO, then the color of the selected index will be getting changed into RED.

This is the below html code :- <ng-container matColumnDef="Eligible To Vote?"><mat-header-cell *matHeaderCellDef mat-sort-header> Eligible To Vote? </mat-header-cell><mat-cell *matCellDef="let element" ><mat-form-field [class.app-input-no-underline]="true"><mat-select id="eligind" placeholder="Select" (ngModelChange)="EligOnChange($event)" [(value)]="element?.detail.Elig_Indc" [(ngModel)]="element?.detail.Elig_Indc" name="elig-voting"> <mat-option>Select</mat-option><mat-option value="1">Yes</mat-option><mat-option value="0">No</mat-option></mat-select> </mat-form-field> </mat-cell></ng-container><ng-container matColumnDef="Voting?" > <mat-header-cell *matHeaderCellDef mat-sort-header> Voting? </mat-header-cell> <mat-cell *matCellDef="let row; let element" [ngClass]="{'mat-cell-no': element == 0}" > <mat-form-field [class.app-input-no-underline]="true"><mat-select id="voting" placeholder="Select" (ngModelChange)="VoteOnChange($event)" [(value)]="element?.detail.Voting_Indc " [(ngModel)]="element?.detail.Voting_Indc" name="voting"><mat-option>Select</mat-option><mat-option value="1" >Yes</mat-option><mat-option value="0" >No</mat-option> </mat-select> </mat-form-field> </mat-cell></ng-container>

In both the dropdowns the ngModelChange is the listener. Below is the respective typescript:

EligOnChange($event) { if ($event !== '0') { } else { alert('a'); this.EligibilityToVote = false; if (this.IsVoting === false) { this.styleClass = 'vote-same-red mat-select-text-value'; } else { alert('sdgf'); } } }

VoteOnChange($event, element) { if ($event !== '0') { } else { alert('a'); this.IsVoting = false; if (this.EligibilityToVote === false) { this.styleClass = 'vote-same-red mat-select-text-value'; } else { alert('sdgf'); } } }

As of now, i am unsuccessful to change the color of the selected index. Please need help

Is there anything else we should know? Stack Traces, Screenshots, etc.

The look alike example link given below The Stackblitz Code

[andrewseguin]

@postmeback Sorry but I’m not sure we’ll be able to help out here. You may have more luck posting on StackOverflow. I recommend trying to clean up your example as much as possible to really show what you are trying to accomplish. I tried to look at the code but it isn’t clear what you are trying to do, e.g. this.styleClass doesn’t exist so I’m not sure where that fits into your goal.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}