How to pass and receive data using router.navigate with Angular?

Question

I am trying to pass and read data using Angular Route.navigate ,

On one component I have

this._router.navigate(["dashboard",{ queryParams: { page: 1 }}],

On Dashboard component I have

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

But this always return 0

Am I doing anything wrong?

My ng --version is

@angular/cli: 1.0.2
node: 6.3.1
os: darwin x64
@angular/common: 4.1.1
@angular/compiler: 4.1.1
@angular/core: 4.1.1
@angular/forms: 4.1.1
@angular/http: 4.1.1
@angular/platform-browser: 4.1.1
@angular/platform-browser-dynamic: 4.1.1
@angular/router: 4.1.1
@angular/cli: 1.0.2
@angular/compiler-cli: 4.1.1
IPLCEWKS01167:routeTest iplcewks01167$

Pengyy · Accepted Answer · 2017-05-09 03:34:29Z

2

queryParams should be the second parameter for navigate.

replace this line

this._router.navigate(["dashboard",{ queryParams: { page: 1 }}];

to

this._router.navigate(["dashboard"], { queryParams: { page: 1 }});

answered May 9, 2017 at 3:34

Pengyy

38.3k15 gold badges85 silver badges73 bronze badges

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

3 Comments

raju Over a year ago

I dont know the reason , but this is not working. But this works :: this._router.navigate(["dashboard",{ page: 1 }] :: this.sub = this._route.params .subscribe(params => { console.log(params); // Defaults to 0 if no query param provided. let page = +params['page'] || 0; console.log(page); });

Pengyy Over a year ago

@raju yes, they are two different way. when using queryParams, it should be setted to the second parameter.

Pengyy Over a year ago

@raju and the previous one is syntax for params and the second is for queryParams.

Harleen Kaur Arora · Accepted Answer · 2017-05-09 06:53:31Z

1

Try this :-

this.router.navigate(['/dashboard', { queryParams: { page: 1 }} ]);

answered May 9, 2017 at 6:53

Harleen Kaur Arora

2,0872 gold badges27 silver badges59 bronze badges

Comments

Rahul Singh · Accepted Answer · 2017-05-09 07:04:26Z

0

Try this

{ path: 'a4/:message', component:  Angular4Component, data:{ ping:'passedvia router'}}

fetch it in the component using this.message = this.route.snapshot.params['message'];

this is the file in which it is used in the repo .

https://github.com/rahulrsingh09/AngularConcepts/blob/master/src/app/angular4/angular4.component.ts

The working example for the same - https://rahulrsingh09.github.io/AngularConcepts

answered May 9, 2017 at 7:04

Rahul Singh

19.7k13 gold badges69 silver badges96 bronze badges

Comments

singh_v · Accepted Answer · 2020-07-15 17:46:53Z

0

Angular 7.2.0 introduced new way of passing the data when navigating between routed components without the data being a part of the query string.

Sending the data

export class ComponentA {
    constructor(private router: Router) {}
    goToComponentB(): void {
        this.router.navigate(['routePath'], {state: {data: {...}}});
    }
}

Receiving the data

You can read the data from browser’s history object in the constructor:

constructor(){
   Console.log(history.state.data);
}

Reference - https://medium.com/ableneo/how-to-pass-data-between-routed-components-in-angular-2306308d8255

answered Jul 15, 2020 at 17:46

singh_v

1722 silver badges15 bronze badges

Collectives™ on Stack Overflow

How to pass and receive data using router.navigate with Angular?

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related