Search code examples
angularroutesangular-router

Send data through routing paths in Angular

Is there anyway to send data as parameter with router.navigate? I mean, something like this example, as you can see the route has a data parameter, but doing this it's not working:

this.router.navigate(["heroes"], {some-data: "othrData"})

because some-data is not a valid parameter. How can I do that? I don't want to send the parameter with queryParams.

Solution

  • There is a lot of confusion on this topic because there are so many different ways to do it.

    Here are the appropriate types used in the following screen shots:

    private route: ActivatedRoute
private router: Router

    1) Required Routing Parameters:

    enter image description here

    2) Route Optional Parameters:

    enter image description here

    3) Route Query Parameters:

    enter image description here

    4) You can use a service to pass data from one component to another without using route parameters at all.

    For an example see: https://blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/

    I have a plunker of this here: https://plnkr.co/edit/KT4JLmpcwGBM2xdZQeI9?p=preview