How can I prevent the variable value from resetting?

Issue

Following setData function gets triggered upon scrolling within a table from the child component,

this.buttonDisabled:boolean = true;

setData(value: boolean) {
  this.name = value;
  this.buttonDisabled = false;
}

However, if I go back to another page and come back to the old page again, this.buttonDisabled value resets. How can I prevent the value from resetting?

Solution

You can store the last value in the service and fetch it when needed, do ensure you reset the value when you do not need it anymore, to avoid bugs.

ts

import { Component, OnInit } from '@angular/core';
import {
  ActivatedRoute,
  NavigationEnd,
  Router,
  RoutesRecognized,
} from '@angular/router';
import { filter, pairwise } from 'rxjs/operators';
import { DummyService } from '../dummy.service';
import { RouterExtService } from '../router-ext.service';

@Component({
  selector: 'app-student',
  templateUrl: './student.component.html',
  styleUrls: ['./student.component.css'],
})
export class StudentComponent implements OnInit {
  prevUrl: string;
  currentUrl: string;

  setData(value: boolean) {
    this.dummyService.buttonDisabled = value;
  }

  get buttonDisabled() {
    return this.dummyService.buttonDisabled;
  }

  constructor(
    private routerExtService: RouterExtService,
    private dummyService: DummyService
  ) {}
  ngOnInit() {}

  showUrl = () => {
    let previous = this.routerExtService.getPreviousUrl();
    console.log('previous', previous);

    let getCurrentUrl = this.routerExtService.getCurrentUrl();
    console.log('getCurrentUrl', getCurrentUrl);
  };
}

service

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class DummyService {
  buttonDisabled: boolean = false;
  constructor() {}
}

stackblitz

Answered By - Naren Murali