Keeping checkbox flagged when navigating to another page. (Angular)

Question

In the "Pricing" component I check "Accept payment in all currencies", however when I return to "General" to edit something and go back to "Pricing" the checkbox is unchecked, how can I make it not happen and keep it checked ? Below images and code (Sorry I don't have yet reputations for attach images, follow links.) 1 : https://i.stack.imgur.com/H6bZ0.png [2]: https://i.stack.imgur.com/nNHM2.png [3]: https://i.stack.imgur.com/n3oz6.png

 <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

You can use a service to share data between components and keep them stored even when a route changes.

Then you can bind the checkbox value to a variable initialized in that service.

I provided a stackblitz to explain better.