title: How to change color on selected index change of dropdown inside angular material table
body: <p>In my angular material table there are two dropdowns whose OnChange method gives an output of <strong>YES/NO</strong>. Now, what i want is, if both the selected indexes are <strong>NO</strong>, then the color of the selected index will be getting changed into <strong>RED</strong>.</p>
  
  <p>Below is my HTML :</p>
  
  <pre><code>      &lt;ng-container matColumnDef="Eligible To Vote?"&gt;
      &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; Eligible To Vote? &lt;/mat-header-cell&gt;
      &lt;mat-cell *matCellDef="let element"&gt;
        &lt;mat-form-field [class.app-input-no-underline]="true"&gt;
          &lt;mat-select id="eligind" placeholder="Select" 
                (ngModelChange)="EligOnChange($event)" 
                [(value)]="element?.detail.Elig_Indc"
           [(ngModel)]="element?.detail.Elig_Indc"&gt;
  
           &lt;mat-option&gt;Select&lt;/mat-option&gt;
            &lt;mat-option value="1"&gt;Yes&lt;/mat-option&gt;
            &lt;mat-option value="0"&gt;No&lt;/mat-option&gt;
          &lt;/mat-select&gt;
        &lt;/mat-form-field&gt;
      &lt;/mat-cell&gt;
    &lt;/ng-container&gt;
    &lt;ng-container matColumnDef="Voting?"&gt;
      &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; Voting? &lt;/mat-header-cell&gt;
      &lt;mat-cell *matCellDef="let element"&gt;
        &lt;mat-form-field [class.app-input-no-underline]="true"&gt;
          &lt;mat-select id="voting" placeholder="Select" (ngModelChange)="VoteOnChange($event)" 
          [(value)]="element?.detail.Voting_Indc " 
          [(ngModel)]="element?.detail.Voting_Indc" name="voting" &gt;
            &lt;mat-option&gt;Select&lt;/mat-option&gt;
            &lt;mat-option value="1" &gt;Yes&lt;/mat-option&gt;
            &lt;mat-option  value="0"&gt;No&lt;/mat-option&gt;
          &lt;/mat-select&gt;
        &lt;/mat-form-field&gt;
      &lt;/mat-cell&gt;
    &lt;/ng-container&gt;
  </code></pre>
  
  <p>And below is my OnChange code for the dropdown:</p>
  
  <pre><code>EligOnChange($event, element) {
   if ($event !== 0) {
     this.EligibilityToVote = false;
    } else {
       this.EligibilityToVote = true;
    }
    return this.EligibilityToVote;
    }
  
   `VoteOnChange($event, element) {
        if ($event !== 0) {
        this.IsVoting = false;
          } else {
         this.IsVoting = true;
        }
       return this.IsVoting;
     }`
  </code></pre>
  
  <p>Now, depending on the output of both the methods, i want to change the color of both the selected index to RED</p>
  
  <p>if both the selected index gives answer as NO: then the text will become red in color. That is all i want</p>
  
  <p><strong>Please feel free to ask any question</strong></p>
  
  <p><strong>Thanks in advance</strong></p>
  
  <p><strong>EDIT</strong></p>
  
  <p>The <a href="https://angular-yjnjta.stackblitz.io/" rel="nofollow noreferrer">stackblitz URL</a></p>