Angular - Active state gets removed on next and back button

Question

I've this quiz app, True/False statements in one question and T and F button against each statement. When I select the options and click on next/back button, active class gets removed from the previous one. As I'm a beginner, I can't think what I'm doing wrong. any help please?

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

<div class="qitem qclose"
    [ngClass]="{'qclose-active': selectAnswer[j]?.dirty && (selectAnswer[j].select == 'false')}"
    (click)="changeFalse(j , item)">
     <i class="qitembox qclose-icon"></i>
</div>
<div class="qitem qtick"
    [ngClass]="{'qtick-active': selectAnswer[j]?.dirty && (selectAnswer[j].select == 'true')}"
    (click)="changeTrue(j , item)">
    <i class="qitembox qtick-icon"></i>
</div>

Answer 1

You need to assign that object to model not as generic Demo

your assigns functions

changeFalse(i, option) {
    console.log(option.id);
    option.selectAnswer = { select: 'false', dirty: 'true' };
}

changeTrue(i, option) {
    console.log(option.id);
    option.selectAnswer= { select: 'true', dirty: 'true' };
}

your html

<div class="ccq">
    <div class="qitem qclose" [ngClass]="{'qclose-active': item.selectAnswer?.dirty && (item.selectAnswer?.select == 'false')}" (click)="changeFalse(j , item)">
         <i class="qitembox qclose-icon">F</i>
    </div>
    <div class="qitem qtick" [ngClass]="{'qtick-active': item.selectAnswer?.dirty && (item.selectAnswer?.select == 'true')}"(click)="changeTrue(j , item)">
        <i class="qitembox qtick-icon">T</i>
    </div>
</div>