Angular - toggle two classes on button clicks

Question

I'm a beginner in angular and I'm trying to fix a problem in which I can't toggle class on button clicks. It's a quiz app and In true/false question format there are 4 statements and 2 buttons to mark tick or cross against it but can use one active class (either true or false). Now, the logic I've used doesn't remove other class on the click of other button. Any help would be appreciated. Working stack blitz demo: https://stackblitz.com/edit/angular-ivy-4yczgp

component.html

<div class="statement-row"
             *ngFor="let item of qblock.options;let j = index"
             [ngClass]="{'wrong-answer': item.selectedIndex === j,'correct-answer':item.customIndex === j}">
          <div class="statement-question">
            <div class="qitem-text">
              <div class="qitem-textbox">
                <p>{{item.statement}}</p>
              </div>
            </div>
            <div class="ccq">
              <button class="qitem qclose"
                   (click)="item.selectedIndex=j">
                <i class="qitembox qclose-icon"></i>
              </button>
              <button class="qitem qtick"
                   (click)="item.customIndex=j">
                <i class="qitembox qtick-icon"></i>
              </button>
            </div>
          </div>
        </div>

Cagri Tacyildiz · Accepted Answer · 2020-06-11 14:06:31Z

1

Your problem is that you are using multiple unrelated conditions for ngClass and eacj click you make that condition correct. So you make two conditions correct. That is why you can't change.

You need to initialize another one when clicking

<button class="qitem qclose"
   (click)="item.selectedIndex=j;item.customIndex=null">
   <i class="qitembox qclose-icon"></i>
 </button>
 <button class="qitem qtick"
     (click)="item.customIndex=j;item.selectedIndex=null">
     <i class="qitembox qtick-icon"></i>
 </button>

answered Jun 11, 2020 at 14:06

Cagri Tacyildiz

17.7k6 gold badges38 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

muasif80 · Accepted Answer · 2020-06-11 14:38:36Z

0

This is another way of doing it.

You set the class of the item.
If its wrong-answer that class will be applied and if its correct-answer that class will apply.
You set the item.class = 'wrong-answer' or item.class='correct-answer' on the respective buttons.

See the stackblitz for it

answered Jun 11, 2020 at 14:38

muasif80

6,0365 gold badges36 silver badges47 bronze badges

Collectives™ on Stack Overflow

Angular - toggle two classes on button clicks

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related