Maintaining checkbox selection while switching pages in Angular

When I try to edit the settings for accepting payments in all currencies under the "Pricing" component, the checkbox is unchecked every time I return to the "General" section. How can I prevent this from happening and keep the checkbox checked? Refer to the following links for images: 1, 2, 3.

 <div class="inline-vertical-align input-convert-values minimun-height">
                <div class="inputs-value-container">
                    <div class="big-value-container">
                        <mat-checkbox [disabled]="mode === 'view'" [checked]="active?.bothMandatory" (change)="onCheckBoxChange($event, '')" 
                        color="primary">{{ 'managePackages.bothMandatory' | translate }}</mat-checkbox>
                    </div>
                </div>
                <div class="inputs-value-container" *ngIf="active?.bothMandatory">
                    <p [ngClass]="{'disabled': mode === 'view'}" class="underline-button" (click)="distributeEqualy()" >{{ 'managePackages.distributeEqualy' | translate }}</p>
                </div>
            </div>
        
            <div class="inline-vertical-align input-convert-values minimun-height">
                <div class="inputs-value-container">
                    <div class="big-value-container">
                        <mat-checkbox [disabled]="active?.bothMandatory || mode === 'view'" [checked]="active?.acceptBnb || active?.bothMandatory"
                        color="primary" (change)="onCheckBoxChange($event, 'BNB')">BEP20 - Binance</mat-checkbox>
                    </div>
                </div>
                <div class="inputs-value-container" *ngIf="active?.bothMandatory">
                    <div class="big-value-container">
                        <input [disabled]="mode === 'view'" (keydown.ArrowDown)="blockNegativeNumber($event, $event.target.value)" type="text" 
                        class="input big-value" (input)="verifyCompleteData()" [(ngModel)]="bnbPrice" placeholder="00,0%"
                        appMaskPercentual>
                    </div>
                </div>
            </div>
        
            <div class="inline-vertical-align input-convert-values minimun-height">
                <div class="inputs-value-container">
                    <div class="big-value-container">
                        <mat-checkbox [disabled]="active?.bothMandatory || mode === 'view'"  [checked]="active?.acceptCoin || active?.bothMandatory"
                        color="primary" (change)="onCheckBoxChange($event, 'Coin')" >TOKEN</mat-checkbox>
                    </div>
                </div>
                <div class="inputs-value-container" *ngIf="active?.bothMandatory">
                    <div class="big-value-container">
                        <input [disabled]="mode === 'view'" (keydown.ArrowDown)="blockNegativeNumber($event, $event.target.value)" type="text" 
                        class="input big-value" (input)="verifyCompleteData()" [(ngModel)]="coinPrice" placeholder="00,0%"
                        appMaskPercentual>
                    </div>
                </div>
            </div>

Answer №1

One effective way to share data between components is by utilizing a service to store the information, ensuring it remains accessible even when navigating between different routes.

To achieve this, you can establish a binding between the value of a checkbox and a variable that is initialized within the shared service.

For a more detailed explanation, I have provided a demonstration on StackBlitz.

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

If every single item in an array satisfies a specific condition

I am working with a structure that looks like this: { documentGroup: { Id: 000 Children: [ { Id: 000 Status: 1 }, { Id: 000 Status: 2 ...

Is there a way to append a unique property with varying values to an array of objects in TypeScript?

For instance: items: object[] = [ {name: 'Backpack', weight: 2.5}, {name: 'Flashlight', weight: 0.8}, {name: 'Map', weight: 0.3} ]; I prefer the items to have an 'age' property as well: it ...

The issue with ngModel in Angular is that it fails to update the value within the component

My ngModel doesn't seem to be functioning properly when I use it with a textbox in my application. This is the code snippet from app.component.html: <input type="text" [value]="name" [ngModel]="name"> Name is: {{na ...

Unable to access FireReader in Ionic 3, while Ionic 4 functions properly

After building my Ionic project on two different computers, I noticed that I received varying results. On the first computer: Ionic Info Ionic: ionic (Ionic CLI) : 4.2.1 (/usr/local/lib/node_modules/ionic) Ionic Framework : ionic-angular 3.9.2 ...

Do not display large numbers within an HTML card

I have this card here and displaying dynamic data inside it. The number is quite large, so I would like it to appear as 0.600000+. If a user hovers over the number, a tooltip should display the full number. How can I achieve this? Below is the HTML code ...

checkbox remains stuck at the same value

The checkbox value is not changing to true or false, it appears to be stuck on true. Even if a user does not wish to agree to the terms, it still shows as if the user has not unchecked the checkbox (although the tick mark is removed). I am trying to figu ...

Ways to eliminate additional data points on the x-axis in Highcharts

I'm currently using Highcharts to plot data for specific ID's, but I'm experiencing a display issue where extra data points are showing up on the x-axis. I only want to show certain data points on the x-axis and am not sure how to remove the ...

Issues arise with Typescript Intellisense in Visual Studio Code causing it to stop functioning

I'm currently exploring the world of building desktop applications using Electron and Typescript. After selecting Visual Studio Code as my IDE, everything was going smoothly and I managed to successfully load a sample HTML file into Electron. However ...

Looking to display the ng-option in two lines within Angular 6?

How can I display data in a select dropdown with two lines for each option? I am currently using ng-select. <ng-select [(ngModel)]="selectedData" placeholder="Select Data"> <div *ngFor="let data of Data"> <ng-option [value]="da ...

Error: Unexpected character U found at the beginning of the JSON data when using JSON.parse in Angular 8

Lately, I came across an issue while making changes to some parts of my previous code. The error caught my attention as it occurred when trying to pass a specific object or a part of that object in Angular 8, NodeJS with express, and mongoose. Upon checki ...

angular-ouath2-oidc fails to redirect following user authorization

I'm working on implementing angular-oauth2-oicd for obtaining users' permission to access their basecamp3 accounts. The application is able to successfully load the access request, but I'm facing an issue where upon clicking 'grant acce ...

Getting and passing data from a frontend form to Java, then displaying it back in the frontend through Angular

The successful implementation of a payment verification SOAP XML API in JAVA has been achieved. Through the use of JAVA code, XML requests are sent to a payment API with SOAPAction headers and Body, resulting in a response from the API. Now, the goal is t ...

Verifying callback type in Typescript based on another argument's validity

There is a JavaScript function that I am working with: const fn = (cb, param) => { cb(param); }; This function is meant to be called in two ways within TypeScript: const cb0 = () => {}; fn(cb0); const cb1 = (param: string) => { }; fn(cb1, &a ...

Having trouble with typecasting in Angular 9 after receiving an HTTP response?

When initializing my component, it fetches student information from an API. Here is the ngOnInit code for component-version1: ngOnInit(): void { if(!this.student) { this.studentsService.getStudentDetail(this.id).subscribe( (response: Stu ...

How should one properly format an array of objects with elements that are different types of variations?

I am currently developing a versatile sorting module using TypeScript. This module will take in an array of data objects, along with a list of keys to sort by. Once the sorting process is complete, the array will be sorted based on the specified keys. To ...

Creating a function in Ionic 2: A step-by-step guide

I'm having trouble defining a simple function in Ionic 2. Here is the code I am struggling with: import { Component } from '@angular/core'; import { NavController, NavParams } from 'ionic-angular'; @Component({ selector: &a ...

Strategies for reducing the number of ngIf statements in Angular's template

I'm seeking advice on how to avoid using multiple *ngIf in templates. For instance, in a component's template, depending on the route, I need to display various elements like so: <div *ngIf="route == 'page1'">Title for page 1< ...

Tips for eliminating unicode characters from Graphql error messages

In my resolver, I have implemented a try and catch block where the catch section is as follows: catch (err: any) { LOG.error("Failed to get location with ID: " + args.id); LOG.error(err); throw new Error(err); ...

There is no XHR request sent when invoking the http function

I am facing challenges in configuring a service in angular2 to interact with a REST backend. My attempt at setting up a basic example for sending requests to a rest backend and handling the response seems to be on track. The Service is being called correc ...

Instructions on invoking a function when a button is clicked

I am attempting to trigger a dataUpdate function upon clicking the edit() button I am striving to modify the record Current Version: Angular CLI: 10.0.6 Angular: 10.0.10 registration.component.html <div> <button type="button&quo ...