Angular - unable to maintain active class

Question

In this app, In each question, I have 4 statements and in those statements, either True or false can be right answers, that is working fine. But when I click on next statement it removes the class from previously selected element. I want to select either true or false from any statement and it should maintain its active state when I click on next statement's button. What is the way I can handle that? I'm using IDs so I can't think of any workaround. Please any help or suggestions..

Working Stackblitz Demo: https://stackblitz.com/edit/angular-ivy-4yczgp

<div class="statement-row"
                               *ngFor="let item of qblock.options;let j = index"
                               [class.correct-answer]="item.id == id && right"
                               [class.wrong-answer]="item.id == id && wrong"
                               >
                               <!-- [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">
                                <div class="qitem" [class.green-class-right]="highlight_false_green && item.id == id" [class.red-class-wrong]="highlight_false_red  && item.id == id"
                                        (click)="clickFalse(item)">
                                  <i class="qitembox qclose-icon"></i>
                                </div>
                                <div class="qitem" [class.green-class-right]="highlight_true_green  && item.id == id" [class.red-class-wrong]="highlight_true_red  && item.id == id"
                                (click)="clickTrue(item)">

                                  <i class="qitembox qtick-icon"></i>
                                </div>
                              </div>
                            </div>
                            <div class="correct-statement">
                              <span class="true-statement">This statment is True</span>
                              <span class="false-statement">This statment is False</span>
                              <em class="wrong-answer-description">
                                {{item.explanation}}
                              </em>
                              <em class="correct-answer-description">
                                {{item.explanation}}
                              </em>
                            </div>

                          </div>

Answer 1

I reworked the component, so I think it works as you want. You can find the code here: https://stackblitz.com/edit/angular-ivy-pctp7z

If you have any further questions, please feel free to ask them. It's a bit difficult to describe all the code changes. I hope it helps!