title: Ionic 4 change background dynamically of dynamical variables
body: <p>I'm building a quiz app just for fun. But I'm not getting what I want.</p>
  <p>Basically, I have a question and answers (a-e options).</p>
  <p>When I click a answer, I want to change the background (card) dynamically just for the selected. If was wrong, change this color to red and the correct one for green.</p>
  <p>Simplified html</p>
  <pre><code>&lt;ion-row&gt;
      &lt;ion-col size=&quot;12&quot; style=&quot;padding: 0;&quot;&gt;
           &lt;ion-card class=&quot;card__wrapper card__{{answer.option}}&quot; *ngFor=&quot;let answer of question.answers&quot; tappable (click)=&quot;chooseAnswer(answer)&quot; [style.backgroundColor]=&quot;answer.is_correct ? correct : 'color'+answer.option&quot;&gt;
                &lt;ion-card-content class=&quot;card__content&quot;&gt;
                     &lt;ion-row&gt;
                         &lt;ion-col size=&quot;2&quot; style=&quot;padding: 0;&quot;&gt;
                             &lt;div class=&quot;option__wrapper&quot;&gt;
                                 &lt;p class=&quot;answer__option&quot;&gt;{{answer.option}}&lt;/p&gt;
                             &lt;/div&gt;
                          &lt;/ion-col&gt;
                          &lt;ion-col size=&quot;10&quot; style=&quot;padding: 0; margin: auto;&quot;&gt;
                              &lt;p style=&quot;text-align: left; margin: 0;&quot;[innerHTML]=&quot;answer.description&quot;&gt;&lt;/p&gt;
                          &lt;/ion-col&gt;
                      &lt;/ion-row&gt;
                  &lt;/ion-card-content&gt;
              &lt;/ion-card&gt;
          &lt;/ion-col&gt;
  &lt;/ion-row&gt;    
  </code></pre>
  <p>Simplified .ts</p>
  <pre><code>public correct: string = '#fff';
  public wrong: string = '#fff';
  public slidePage = '0';
  
  public colorA = '#fff';
  public colorB = '#fff';
  public colorC = '#fff';
  public colorD = '#fff';
  public colorE = '#fff';
  
  chooseAnswer(answer) {
  
      if (answer.is_correct) {
          this.correct = '#00e676';
      } else {
          switch (answer.option) {
              case &quot;A&quot;:
                  this.colorA  = 'red';
                  break;
              case &quot;B&quot;:
                  this.colorB  = 'red';
                  break;
              case &quot;C&quot;:
                  this.colorC  = 'red';
                  break;
              case &quot;D&quot;:
                  this.colorD  = 'red';
                  break;
              case &quot;E&quot;:
                  this.colorE  = 'red';
                  break;
          }
          this.correct = '#00e676';
          
      }
  }
  </code></pre>
  <p>So there are two cases:</p>
  <ol>
  <li><p>Select correct answer</p>
  <p>Set background of the selected answer to green</p>
  </li>
  <li><p>Select wrong answer</p>
  <p>Set background of the selected answer to red and set background of the correct answer to green.</p>
  </li>
  </ol>