Angular - ngClass already present before button click

Question

The problem occurring now, correct class is already present when I load the page because of the condition I've put in, It finds selectAnswer = false and puts correct class in parent. Is there any way to tackle that?

HTML

<div class="question-options" *ngFor="let item of search.options;let j = index">
        <div class="statement-row" [ngClass]="(selectAnswer =='true')?'wrong':'correct'">
          <div class="statement-question">
            <div class="qitem-text">
              <div class="qitem-textbox">
                <p>{{item.statement}}</p>
              </div>
            </div>
            <div class="ccq">
              <div class="qitem qclose" (click)="selectAnswer = 'true'">
                <i class="qitembox qclose-icon"></i>
              </div>
              <div class="qitem qtick" (click)="selectAnswer = 'false'">
                <i class="qitembox qtick-icon"></i>
              </div>
            </div>
          </div>
        </div>
      </div>

TS

  public selectAnswer = {};

I don't know how to manage the states in this case. Any help would be great. Thanks!

Answer 1

You are using for all different search options generated by that ngFor the same component proeprty, "selectAnswer" which can only hold one boolean value, making all other options change. Instead, to get your code working, try declaring in your component

public selectAnswer = {};

And

<div class="question-options" *ngFor="let item of search.options;let j = index">
    <div class="statement-row" [ngClass]="(selectAnswer[j] =='true')?'wrong':'correct'">
      <div class="statement-question">
        <div class="qitem-text">
          <div class="qitem-textbox">
            <p>{{item.statement}}</p>
          </div>
        </div>
        <div class="ccq">
          <div class="qitem qclose" (click)="selectAnswer[j] = 'true'">
            <i class="qitembox qclose-icon"></i>
          </div>
          <div class="qitem qtick" (click)="selectAnswer[j] 'false'">
            <i class="qitembox qtick-icon"></i>
          </div>
        </div>
      </div>
    </div>
  </div>

That should behave the way you wanted! There are other solutions but you can now take it from here, it can be improved depending on your needs.

EDIT: To get your classes not to get applied to your container until a first change has been made, you can add a new key to our selectAnswer object:

<div class="question-options" *ngFor="let item of search.options;let j = index">
<div class="statement-row" [ngClass]="{'correct': selectAnswer[j]?.dirty && (answer[j].select == 'true'), 'wrong': selectAnswer[j]?.dirty && (answer[j].select == 'false')}">
  <div class="statement-question">
    <div class="qitem-text">
      <div class="qitem-textbox">
        <p>{{item.statement}}</p>
      </div>
    </div>
    <div class="ccq">
      <div class="qitem qclose" (click)="selectAnswer[j] = {select: 'true', dirty: 'true'};">
        <i class="qitembox qclose-icon"></i>
      </div>
      <div class="qitem qtick" (click)="selectAnswer[j] = {select: 'false', dirty: true};">
        <i class="qitembox qtick-icon"></i>
      </div>
    </div>
  </div>
</div>