Sending information from one component to another may result in the data becoming undefined

Question

Sending information from one component to another may result in the data becoming undefined

Using a service to transfer data between components in an article.

Learn more about passing data between two components in Angular 2

export class SendService {
  constructor(
    private router:Router,
  ) { }
  private data;
  setData(data){
    this.data = data;
  }
  getData(){
    let temp = this.data;
      this.clearData();
    console.log('result is ',temp);
    return temp;
  }
  clearData(){
    this.data = 0;
}

Sender component's data value can be either 1 or 0.

sender(data){
    this.transfereService.setData(data);
  }

Received component:

ngOnInit() {
    this.data= this.transfereService.getData();
  }

When changing the page in HTML, users gain access to some menu based on data being equal to 1.

However, there is a problem - when refreshing the page, the data value becomes undefined. How should I handle this?

angular typescript

Answer 1

Answer №1

Upon refreshing the page, all data will be reset and the data variable will become undefined. In your service, you have declared the data variable but not initialized it with any value. To prevent getting an undefined error, make sure to initialize the variable as shown below.

export class SendService {
  constructor(
    private router:Router,
  ) { }
  private data = 0; //updated line
  setData(data){
    this.data = data;
  }
  getData(){
    let temp = this.data;
      this.clearData();
    console.log('result is ',temp);
    return temp;
  }
  clearData(){
    this.data = 0;
  }

To address this issue, I am presenting a concept using local storage for persistence even after reloading the page. You can refer to this example - stackblitz for local storage example

Answer 2

Upon refreshing the page, all data will be reset and the data variable will become undefined. In your service, you have declared the data variable but not initialized it with any value. To prevent getting an undefined error, make sure to initialize the variable as shown below.

export class SendService {
  constructor(
    private router:Router,
  ) { }
  private data = 0; //updated line
  setData(data){
    this.data = data;
  }
  getData(){
    let temp = this.data;
      this.clearData();
    console.log('result is ',temp);
    return temp;
  }
  clearData(){
    this.data = 0;
  }

To address this issue, I am presenting a concept using local storage for persistence even after reloading the page. You can refer to this example - stackblitz for local storage example

Sending information from one component to another may result in the data becoming undefined

Answer №1

Similar questions

Properly cancel subscriptions using post, put, patch, or delete requests in Angular

Finding the value of an item within a JSON sub-array based on the most recent date that falls within a specified timeframe

Navigating session discrepancies: Combining various social media platforms using Next.js and NextAuth

What is the best way to determine the final letter of a column in a Google Sheet, starting from the first letter and using a set of

Using Typescript to Define Mongoose Schemas

Angular module federation encountered a problem with injecting dependencies without sharing, resulting in an

What is the process behind the functioning of Typescript Annotation Scan?

Can you explain the distinction between String[] and [String] in TypeScript?

Using an Angular Promise and Conditional Statement for Authentication Guard

Are `import type` and `import()` the same thing?

A guide on retrieving the values of all child elements within an HTML element using Puppeteer

Steps for generating a docker-compose.yml configuration file with jib integration

The character 'T' cannot be assigned to the data type 'number'

Stay tuned for updates in Angular's database after adding or updating entries

Tips for Maintaining User Data Across Pages in React using React-Router-Dom and Context

Utilizing generics with Swagger in NestJS

Distinguish between two varieties using parameters

Using an enum with [routerlink] in Angular 7 is a great way to navigate

How can one execute a function within an HTML attribute value using Angular?

Using CreateMany within a Prisma Create query