how to share data between routes angular 8 [duplicate]

Question

I have a JSON data which is being returned when in the Parent component. All you would need to do is type the numbers "12233" or "34567" on the Parent component and you can see on the console the data being printed.

Like in child I want to print the {{firstName}} from using the data from Parent.

Is there a way that data attributes can be passed to the Child component using the routes like in the stackblitz here

Parent: HTML:

<button class="btn-thumbnail">type the secret number to pass</button>
<!-- "number": 12233
or
"number": 34567 -->

TS:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

import data from '../data.json';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {

  constructor(private router: Router) {
    document.addEventListener('keypress', this.secretNumber);
  }

  typed = '';
  firstName : any = {};

  secretNumber = event =>  {
    this.typed += String.fromCharCode(event.keyCode);
    let eraseData = [];
    let matchedData = {};

    if (this.typed.length == 5) {
      Object.keys(data).length > 0 &&
      data.items && data.items.userdata.map((item, i) => {
        if(item.number == this.typed) {
          matchedData = item;
          console.log(item);
          this.firstName = item.firstName;
          console.log(this.firstName);
          this.goToChild();
          return matchedData;
        }
        if (item.number != this.typed) {
          eraseData.push(item);
        }
        return eraseData;
      });

      if (Object.keys(matchedData).length == 0 && eraseData.length > 0 && this.typed.length == 5) {
        this.typed = '';
      }
    }
  };

  ngOnDestroy() {
    document.removeEventListener('keypress', this.secretNumber);
  }

  ngOnInit() {
  }

  goToChild() {
    this.router.navigate(['/child'], { skipLocationChange: true });
  }

}

Data.JSON:

{
    "items": {
        "userdata": [
            {
                "firstName": "john",
                "lastName": "doe",
        "number": 12233
            },
            {
                "firstName": "mary",
                "lastName": "jane",
        "number": 34567
            }
        ]
    }
}

Child: HTML:

<p>
child works! {{firstName}}
</p>

Stackblitz

pascalpuetz · Accepted Answer · 2019-12-30 06:16:08Z

2

Sure, it works just like in your example.

Send the value as a queryParam like this:

goToChild(firstName) {
  this.router.navigate(['/child'], { skipLocationChange: true, queryParams: {firstName} });
}

And then retrieve it on the child route like this:

public firstName?:string;

constructor(
  private activatedRoute:ActivatedRoute
) { }

ngOnInit() {
  this.activatedRoute.queryParamMap.subscribe(paramMap => this.firstName = paramMap.get('firstName'));
}

Here the working StackBlitz.

Passing Objects

If you want to pass an Object, the best way would be to hold the object in a service and pass only a unique identifier via the above method. If you use a State Management Library, you should hold your Object there instead of the service.

I made another StackBlitz shocasing this with your example (I also cleaned up the code a bit to make it easer to see).

edited Dec 30, 2019 at 6:16

answered Dec 28, 2019 at 22:51

pascalpuetz

5,4281 gold badge15 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Bob Over a year ago

@pascalpuetxz thank you so much for your help, would you know how to pass the whole JSON data to the next component like how you passed one of the parameters. What about the whole data ? Could you please help me there.

pascalpuetz Over a year ago

If you want to pass the whole JSON data, then you should consider holding that data in a Service (@Injectable) or, if you have, your State Management Library (ngxs/ngrx/...). If you want to pass only the part of the data that matches your selected user, then you should consider giving your user an ID, pass that ID through a Query Param or Path Param and add a find method to that said service.

pascalpuetz Over a year ago

@Bob Updated my answer with another Stackblitz

Bob Over a year ago

Hi @pascalpuetz, not sure if you can still see this message. Do you know how to not return the whole object {{ user$ | async | json }} and just return values separately like user.firstName, user.lastName.

Bob Over a year ago

You are just the best and thank you so much and cheers! all the options are working and I will make use of the best one as per the needs.

|

Collectives™ on Stack Overflow

how to share data between routes angular 8 [duplicate]

1 Answer 1

11 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Linked

Related