When navigating using the next and back buttons, the active state in Angular is automatically removed

Looking for some assistance with my quiz app setup. Each question has True/False statements with corresponding buttons to select T or F. However, when I click the next/back button, the active class is not being removed from the previous selection. As a beginner, I'm struggling to figure out the issue. Any advice would be greatly appreciated!

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>
javascriptangulartypescriptdomangular-directive

Answer №1

Make sure to assign that object to the model specifically, not just as a generic Demo

Here are your assigned 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' };
}

Below is your HTML code snippet:

<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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to modify the model of the directive

I'm facing an issue where additional elements added to my array within a controller of a directive are not being displayed in the view. What's even more frustrating is that when I print my model, it doesn't reflect the new elements that have ...

javascriptangularjs

Centralize all form statuses in a single component, conveniently organized into separate tabs

I am working on a component that consists of 2 tabs, each containing a form: tab1.component.ts : ngOnInit() { this.params = getParameters(); } getParameters() { return { text : 'sample' form: { status: this.f ...

angulartypescript

Using Angular 2 to showcase icons in the navbar post authentication

The structure of my components is as follows: The app component contains a navigation bar and router outlet. The navigation bar includes a logo, generic links, and specific links that are only shown after user login and authentication. The router outlet de ...

eventsangularangular2-routingeventemitter

Having trouble with @here/maps-api-for-javascript in Next.js - it's not functioning

Can anyone help me understand why @here/maps-api-for-javascript is not functioning properly in my Next.js application and producing the following error message: import H from "@here/maps-api-for-javascript"; export default H; ^^^^^^ SyntaxErr ...

javascriptnext.jshere-api

Revamping the values attribute of a table embedded in a JSP page post an AJAX invocation

I am encountering an issue with displaying the content of a table. The table's data is retrieved via an AJAX request when clicking on a row in another table on the same page. Here is my code for the JSP page: <table id="previousList" class="table" ...

javascriptjqueryajaxjsp

Error: Attempting to access the 'getProvider' property of an undefined variable

I am encountering an error that says "property of undefined (reading getProvider)" while deploying my function to Firebase. I am currently trying to figure out how to obtain the auth instance. When I attempt to use firebase.auth, it results in another er ...

javascriptreactjsexpress

What is the best way to link options from a select directive with a different array?

Update: the working jsfiddle can be found here: http://jsfiddle.net/robertyoung/jwTU2/9/ I'm in the process of developing a webpage/app using AngularJS. The specific functionality I aim to achieve involves allowing users to add a row to the timecard ...

javascriptangularjsangularjs-directive

Using a promise instead of resolving it with Angular's $q.then() methodology

Imagine you come across the given code snippet: var callNo1 = $http(...).then(function (response1) { var callNo2 = $http(...).then(function (response2) { return [response1.data, response2.data]; }); return callNo2; }).then(function (r ...

javascriptangularjs

The function WebForm_DoCallback is not recognized

Encountering an error where WebForm_DoCallback is undefined. UPDATE WebForm_DoCallback("AccountPageControl1", "FileSave~" + fileName, CVFileSavedServerResponse, null, null, true); function CVFileSavedServerResponse(param, context) { } Why isn't ...

javascriptajax

Encountering a hiccup when working with Angular and npm

Error: The '@angular-devkit/build-angular:browser' builder's node package could not be located. Upon running npm start, the console displays this error message: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="473 ...

angularnpm

Vue - Troubleshooting why components are not re-rendering after data updates with a method

Check out this simple vue component I created: <template> <div class="incrementor"> <p v-text="counter"></p> <button v-on:click="increment()">Increment</button> </div> </template> <script lan ...

typescriptvue.jsmethodscomponentsrender

What is the process for aligning Item1 to the left and Item2 & Item3 to the right using MUI React?

I'm working on a component that contains three different Typography components. I need to align "summary" to the left, while 'miles' and 'duration' should be aligned to the right. https://i.stack.imgur.com/7e9sY.png Here's t ...

javascriptcssreactjsmaterial-ui

Encountering issues when trying to incorporate SASS and CSS libraries in NextJS

I have been attempting to integrate the wix-style-react plugin into my NextJS project, but I am encountering difficulties when trying to build. According to their documentation, they utilize Stylable, SASS, and CSS Modules. After installing the plugin and ...

javascriptreactjswebpacknext.js

When URL string parameters are sent to an MVC controller action, they are received as null values

Are You Using a Controller? public class MyController : Controller { [HttpGet] public ActionResult MyAction(int iMode, string strSearch) { return View(); } } Within my view, I have a specific div with the id of "center" I am runn ...

javascriptasp.net-mvcstringcontrollernull

javascript retrieving JSON data through an API request from a redirected URL

I am retrieving JSON data from the Glitch API. Upon opening the link, it redirects to a different domain (the domain was changed from gomix.me to glitch.me) When using Postman for both HTTP requests, I receive identical JSON data. However, there is a d ...

javascriptjqueryjson.htaccessredirect

Listener for clicking on a marker in Google Maps

Trying to add a click event to Google Map markers in my Cordova app has proven to be quite challenging. The recommended ways mentioned in the documentation don't seem to work, unless I make the marker draggable - which is not an option for me. It seem ...

javascriptangularjscordovagoogle-mapsgoogle-maps-api-3

Reactstrap: Is it necessary to enclose adjacent JSX elements within a wrapping tag?

While working on my React course project, I encountered an issue with my faux shopping website. The error message that keeps popping up is: Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...& ...

javascriptreactjstwitter-bootstrapjsxreactstrap

Rest assured, with Ajax Security, your protection is in good

I am currently developing a browser game that heavily utilizes AJAX instead of page refreshes. The combination of PHP and JavaScript is being employed for this project. However, during the course of my work, I became aware of the potential security vulnera ...

phpjavascriptjqueryhtmlajax

A way to navigate through a JSON result without the need for ngFor in Angular

Upon receiving JSON data from the backend, I am presented with the following result: [ { "status":"RUN", "numberOfTurbines":1 }, { "status":"ERROR", "numberOfTurbines&q ...

angular

Encountering an issue with the constructor function type for @types/tapable/index

Everything was running smoothly on my production website until I decided to run the "npm install" command on the server, followed by the "npm run build:prod" command. Unfortunately, I encountered the following error: ERROR in [at-loader] node_modules/@typ ...

angularnpm