send data to another component through route in angular

Question

I am working on an angular application and realized that in the latest versions of angular, data can be transferred one component to other through routes. I have gone through some blogs but I am not very clear of how to do that.

My code

component1.ts

sendMessageto2() {
    par = this.param
    this.router.navigate(['/vav'],{state : {data : {par}}})
    console.log(this.param)
  }

I want to pass a variable this.param to component2

component1.html

<area shape="rect" coords="818,232,917,262" (click)="sendMessageto2()">

component2.ts

ngOnInit() {
    this.state$ = this.activatedRoute.paramMap
    .pipe(map(() => window.history.state))  
  }

I am not sure how to get this data in the component2 .I get an error for map. Could not find map.Can some one help me with this?

Thanks

Does this answer your question? [How do I pass data to Angular routed components?](https://stackoverflow.com/questions/36835123/how-do-i-pass-data-to-angular-routed-components) — Jacopo Sciampi, Dec 18 '19 at 13:11
get the data in a component not in main.ts: https://stackoverflow.com/questions/58796745/passing-data-using-router/58797605#58797605, get the data in main.component https://stackoverflow.com/questions/58886303/angular-no-way-to-pass-an-object-through-a-router/58891470#58891470. — Eliseo, Dec 18 '19 at 14:08

Mridul · Accepted Answer · 2019-12-20T05:10:12.647

2

For passing data you can do this

this.router.navigate(["/vav", { 'data': data }]);

For receiving on other page

constructor(public router: Router, public route: ActivatedRoute){}
route.params.subscribe(params => {
        let data = params['data']
    });

edited Dec 20 '19 at 05:10

answered Dec 18 '19 at 13:22

Mridul

1,320
1
5
19

is it `route` or `router` ? – chink Dec 20 '19 at 05:02
1

@cvg thanks for pointing out i forgot to add public route: ActivatedRoute. – Mridul Dec 20 '19 at 05:11
also should I make some changes in the `app-routing.module.ts` ? – chink Dec 20 '19 at 05:39
not required. it is used to fetch the param value. – Mridul Dec 20 '19 at 05:48

MonkeyScript · Answer 2 · 2019-12-20T06:09:51.800

1

I assume the data you are trying to pass is a string. Define your route like this,

const routes: Routes = [
  { path:'', component : C1Component },
  { path:'vav', component : C2Component },
];

When routing, add the value in URL as queryParams,

let navigationExtras: NavigationExtras = {
    queryParams: {
        "data"   : encodeURIComponent('Your data'),
    }
};

this.router.navigate(["vav"], navigationExtras);

Fetch the queryParams in second component using ActivateRoute,

decodeURIComponent(this.route.snapshot.queryParams['data']);

Demo : https://stackblitz.com/edit/angular-5zw742

If the data is an object, JSON.stringify() it before encoding and JSON.parse() it after decoding.

edited Dec 20 '19 at 06:09

answered Dec 18 '19 at 13:21

MonkeyScript

4,776
1
11
28

Argument of type '(params: ParamMap) => void' is not assignable to parameter of type '(value: ParamMap, index: number) => ObservableInput'. Type 'void' is not assignable to type 'ObservableInput' – chink Dec 20 '19 at 04:59
I get an error at `params` – chink Dec 20 '19 at 05:00
I've made it simpler with `queryParams`. Check the updated answer and demo. – MonkeyScript Dec 20 '19 at 06:18

Surjeet Bhadauriya · Answer 3 · 2019-12-18T13:32:50.253

0

You can pass like this:

routing.ts

{path: 'component2', component: YourComponent2} // configure it in the routing file

component1.ts

private router: Router // import router
this.router.navigate(['/component2', {id: '1', name: 'surjeet'}]);

component2.ts

private route: ActivatedRoute // import ActivatedRoute
this.route.snapshot.paramMap.get('id');
this.route.snapshot.paramMap.get('name');

edited Dec 18 '19 at 13:32

answered Dec 18 '19 at 13:21

Surjeet Bhadauriya

6,755
3
34
52

score 0 · Answer 4 · answered Dec 18 '19 at 13:26

0

Try this

On component 2

ngOnInit() {
    this.state$ = this.route.snapshot.paramMap.get('param') ; 
  }

'param' value is the value that has been added to the url from component 1 .

answered Dec 18 '19 at 13:26

nXn

904
6
13

send data to another component through route in angular

4 Answers4