Pass objects during router navigate

Question

I would like to pass objects during router navigate to the target component. Currently I am using routeParams and I stringify my objects to strings. This approach works, but I don't like this solution. How would a better solution look like?

export class Overview {
    //import {Router} from "@angular/router-deprecated";
    constructor(private router:Router) {}
    goToElementComponent(elem:Element) {
        this.router.navigate(['ElementDetail', {elem: JSON.stringify(elem)}]);
    }
}
export class ElementDetail {
    // import {RouteParams, Router} from "@angular/router-deprecated";
    this.elem : Element;

    constructor(private routeParams:RouteParams) {}

    ngOnInit() {
        var elem = JSON.parse(this.routeParams.get("elem"));
        if (elem) {
          this.elem = elem;
        } else {
          this.elem = new Element();
        }
    }
}

With the next update (RC.4) data will be supported again. See also stackoverflow.com/questions/37077094/… — Günter Zöchbauer
– Günter Zöchbauer, Commented Jun 30, 2016 at 13:26

Rohit Sengar · Accepted Answer · 2021-01-05 04:07:59Z

9

//Note: router:Router and route:ActivatedRoute
//send object from one component (its independent parent-child relationship with //another component): 
  bill = {
    'customerName': "RAJESH",
    'billNo': "A230",
    'date': "23/12/2020",
    'address': "AGRA",
    'itemDetails':"HUSQVANA VITIPILEN",
    'grandTotal': 2500000
  }
this.router.navigate(['/billingpdf',{billing:JSON.stringify(this.bill)}])

//accessing this object into another component like this:
//-------------------------------------------------------
this.route.snapshot.paramMap.get('billing') //store this variable if you want use further
                                    or
this.route.snapshot.paramMap.getAll('billing')

edited Jan 5, 2021 at 4:07

answered Jan 5, 2021 at 4:02

Rohit Sengar

1571 silver badge7 bronze badges

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

Comments

null canvas · Accepted Answer · 2016-06-30 13:11:55Z

3

Another approach would be to store the temporary params in a Shared Service

You'd have to inject the service into constructors, in order to write/read your object params

answered Jun 30, 2016 at 13:11

null canvas

10.7k2 gold badges17 silver badges18 bronze badges

2 Comments

Yuna Over a year ago

But do not put it in the providers (if you do this, it will create a new object and all data will be lost).. . You also could use an EventEmitter to pass/emit the data and subscribe to it in the target.. .

Johannes Over a year ago

I have included the ElementDataService into main.ts bootstrap. Besides the service just consist of one property and getter and setter methods. It works currently for me. How can it be done better?

Yurii · Accepted Answer · 2024-03-27 17:53:13Z

1

You can do it using NavigationExtras parameter of navigate method. NavigationExtras object should have state parameter where you can put your custom data:

this.router.navigate(['/route-to'], {
      state: {
        someData: { name: 'Some name', description: 'Some description' },
      },
    });

In targeted component we receive data this way:

constructor(private router: Router) {
 this.dataFromRoute = this.router.getCurrentNavigation().extras.state?.['someData'];
}

answered Mar 27, 2024 at 17:53

Yurii

112 bronze badges

Comments

Maihan Nijat · Accepted Answer · 2022-02-22 22:14:20Z

-1

Pass object in the queryParams like the following:

this.router.navigate(['/my-route'], {queryParams: myObject});

answered Feb 22, 2022 at 22:14

Maihan Nijat

9,36313 gold badges69 silver badges118 bronze badges

Collectives™ on Stack Overflow

Pass objects during router navigate

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related