Passing data through Angular2 router

Question

I have a component where I select a set of image objects. I want to pass these selected images to my new route, CreateAlbum. The data it nested and wouldn't be suitable to pass as URL parameters.

Is there any easy way to achieve this?

Here's my code to navigate to the route

  public gotoCreateAlbum(): void {
    this.router.navigate([('/create-album')])
  }

My selected data sits in this variable

@Input() selectedPhotos: IPhoto[];

and this is my routing module

const routes: Routes = [
  { path: 'photos',  component: PhotosComponent},
  { path: 'photos/:filter', component: PhotosComponent},
  { path: 'create-album', component: CreateAlbumComponent}
];

Basically I want to perform the same operations as if the CreateAlbum component was a child to my current component in which case I would have used @Input()

Thanks for that. Works perfect. Would wish they had a data input variable to a routerlink though — user3642173
– user3642173, Commented Dec 8, 2016 at 13:11
A routerLink can only provide what the URL bar can provide. What also might work is angular.io/docs/ts/latest/guide/router.html#!#resolve-guard but that also doesn't take arguments from the routerLink except route parameters and other stuff that the URL bar supports. — Günter Zöchbauer
– Günter Zöchbauer, Commented Dec 8, 2016 at 13:14
Best I found on internet for this is npmjs.com/package/ngx-navigation-with-data — Virendra Yadav
– Virendra Yadav, Commented Nov 28, 2018 at 6:26

Amir · Accepted Answer · 2017-05-22 06:02:13Z

26

I hope this will work. Try using Query Parameters.

 <nav>
      <a [routerLink]="['/component1']">No param</a>
      <a [routerLink]="['/component2']" [queryParams]="{ page: 99 }">Go to Page 99</a>
 </nav>

or

opencomponent2(pageNum) {
    this.router.navigate(['/component2'], { queryParams: { page: pageNum } });
  }

In child component :

constructor(
    private route: ActivatedRoute,
    private router: Router) {}

  ngOnInit() {
    this.sub = this.route
      .queryParams
      .subscribe(params => {
        // Defaults to 0 if no query param provided.
        this.page = +params['page'] || 0;
      });
  }

I have studied this on rangle.io website. Try this if it works for you. otherwise https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service is only option.

edited May 22, 2017 at 6:02

Amir

8,9397 gold badges47 silver badges52 bronze badges

answered Dec 8, 2016 at 13:20

ammy

3264 silver badges4 bronze badges

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

3 Comments

dev Over a year ago

What if you want to pass object? pageNum:{"name":"John"}

Christophe Gigax Over a year ago

@dev same for me, have you find any solution ?

dev Over a year ago

Maybe you can avoid object. For multiple params you can do this.router.navigate(['/Component2'], { queryParams: { page: 3, otherpage:4 } });

Philip Beber · Accepted Answer · 2018-07-21 21:50:49Z

10

See https://angular.io/guide/router for an in-depth example. Scroll down to this code snippet:

gotoHeroes(hero: Hero) {
  let heroId = hero ? hero.id : null;
  // Pass along the hero id if available
  // so that the HeroList component can select that hero.
  // Include a junk 'foo' property for fun.
  this.router.navigate(['/heroes', { id: heroId, foo: 'foo' }]);
}

To get the value of 'id' in the target component:

ngOnInit() {
  this.heroes$ = this.route.paramMap.pipe(
    switchMap((params: ParamMap) => {
      // (+) before `params.get()` turns the string into a number
      this.selectedId = +params.get('id');
      return this.service.getHeroes();
    })
  );
}

edited Jul 21, 2018 at 21:50

answered Sep 11, 2017 at 22:28

Philip Beber

1,25314 silver badges19 bronze badges

3 Comments

Sri Over a year ago

how do you receive the data?

Yashwardhan Pauranik Over a year ago

@Philip Beber Why you have used switchMap here

Philip Beber Over a year ago

Because this.service.getHeroes() executes asynchronously and returns an observable. If it executed synchronously and returned a plain value then you would use map(). switchmap is cool because it cancels any operations you no longer care about. For example, say this.route.paramMap.pipe() emits a value, then this.service.getHeroes() will be called and an observable created. When this.route.paramMap.pipe() emits another value that observable will be canceled and its resources releases. this.service.getHeroes() is called again and a new observable created.

NitinSingh · Accepted Answer · 2017-06-07 19:39:05Z

Unless you want users to manipulate the query string in the addressbar, do a "atob" and "btoa" before sending and after receiving the data. Just a little security

Also, if you don't want to have a subscription, you can use the Route snapshot param as follows (just that it doesn't keep on updating like an observable, so unless the component gets re-init, it won't be getting updated value if any. Hence a good place to get the value is in the ngOnInit event handler

// before
this._router.navigate(["/welcome/" + atob(userName)]);

// after
ngOnInit() {
    this.userName = btoa(this.route.snapshot.params['userName']);
}

Prashobh · Accepted Answer · 2017-12-15 07:46:58Z

You can pass data using router, for example

{ path: 'form', component: FormComponent ,data :{data :'Test Data'} },

and your component

import { ActivatedRoute, Router } from '@angular/router';

export class FormComponent {
    sub: any;
    constructor(private route: ActivatedRoute) { }
    ngOnInit() {
        this.sub = this.route
            .data
            .subscribe(value => console.log(value));
    }
}

More info

But this may not be the preferred way, you can use parent child communication or make a service common and share data between them. Check below references for doing that.

Parent child communication

Share data using service

how do you dynamically pass the data? i.e using this.route.navigate()

lotus · Accepted Answer · 2019-06-10 07:41:09Z

1

sender html

<a [routerLink]="['../../../print/attendance/',{data:userDetails | json}]">link</a>

receiver ts
ngOnInit() {
   this.route.params.subscribe(params=>
    {
      this.data=JSON.parse(params['data'])
    }
    );

  }

answered Jun 10, 2019 at 7:41

lotus

456 bronze badges

Comments

Kiran Mali · Accepted Answer · 2020-05-18 08:46:29Z

Angular >= 7.2.0 introduced a new way of passing the data when navigating between routed components. In NavigationExtras interface within the router module was added a new attribute: state: any and you can set the data which will be present in the new state.

In component

export class ComponentA {
    constructor(private router: Router) {}

    goToComponentB(): void {
        // programmatically        
        this.router.navigate(['/b'], {state: {data: {...}}});
    }
}

In HTML

<a routerLink="/b" [state]="{ data: {...}}">Go to B</a>

Get data in Component B using `history.state.data`

export class ComponentB {
    constructor() {
       console.log(history.state.data); // GET DATA
    }
}

Thanks to Ľudovít Hajzer Read the whole blog here https://medium.com/ableneo/how-to-pass-data-between-routed-components-in-angular-2306308d8255

Shivendra · Accepted Answer · 2017-07-07 05:18:36Z

-1

this.router.navigate(['path', { flag: "1"}]);

answered Jul 7, 2017 at 5:18

Shivendra

11 bronze badge

Collectives™ on Stack Overflow

Passing data through Angular2 router

7 Answers 7

3 Comments

3 Comments

Comments

1 Comment

Comments

In component

In HTML

Get data in Component B using `history.state.data`

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

3 Comments

3 Comments

Comments

1 Comment

Comments

In component

In HTML

Get data in Component B using history.state.data

Comments

Comments

Linked

Related

Get data in Component B using `history.state.data`