Passing query parameter by using navigateByUrl()

Question

I am trying to Navigate to a new page on click of an icon and below is the code

  this.prj = e.data.project_number;
  this.router.navigateByUrl('/dashboard/ProjectShipment/634');

Instead of this hardcoded query parameter 000634 I have to pass a this.prj in to it. My path is like below

const appRoutes: Routes = [
  {
  path: 'dB',
  data: { title: 'Dashboard' },
  children: [
      {
          path: 'ProjectShipment/:reportProject',
          component: ProjectShipmentComponent,
          data: { title: 'Project Shipment' },
      }

I think you are talking about PATH parameter, not QUERY parameter. If you are trying to pass path param, MuruGan's answer is the right one and url will look like '/dashboard/ProjectShipment/634'. But if we are talking about query parameters, then Miguel Pinto's answer is the right one and the url will look smth like '/dashboard/ProjectShipment?prj=634' — kyselm, Aug 27 '20 at 08:19

score 15 · Answer 1 · edited Sep 02 '23 at 16:11

15

You can use 'router.navigate' instead of 'router.navigateByUrl':

this.router.navigate([URL], {queryParams: {id: this.prj}});

edited Sep 02 '23 at 16:11

Sooraj Nair H S

37
8

answered Aug 28 '19 at 14:35

Miguel Pinto

523
2
8

Argument of type '{ queryParams: { id: any; }; }' is not assignable to parameter of type 'NavigationBehaviorOptions'. Object literal may only specify known properties, and 'queryParams' does not exist in type 'NavigationBehaviorOptions'.ts(2345) – Tanzeel Nov 21 '22 at 17:12

score 7 · Accepted Answer · answered Aug 28 '19 at 14:45

7

Simply use string interpolation

this.router.navigateByUrl(`/dashboard/ProjectShipment/${this.prj}`);

answered Aug 28 '19 at 14:45

MuruGan

1,402
2
11
23

what if prj is an object? – afe Apr 21 '20 at 08:23
what can we specify the route.module.ts – Karthic G Dec 21 '20 at 07:59

Chiffie · Answer 3 · 2019-08-28T13:01:42.313

4

// Set our navigation extras object
// that passes on our global query params and fragment
let navigationExtras: NavigationExtras = {
  queryParams: {...},
  state: {...}
};

// Redirect the user
this.router.navigateByUrl(redirect, navigationExtras);

NavigationExtras docs

EDIT: https://stackoverflow.com/a/44865817/5011818 this is also worth to look at

edited Aug 28 '19 at 13:01

answered Aug 28 '19 at 12:51

Chiffie

581
3
18

6

It is worth to comment that your answer seems right if you read the documentation, but it is wrong: `navigateByUrl` ignores those `NavigationExtras`. Related issues requesting an update of Angular docs: https://github.com/angular/angular/issues/22668. and https://github.com/angular/angular/issues/18798 – Ignacio Lago Feb 13 '20 at 09:18

Shafqat Jan · Answer 4 · 2020-05-15T06:58:01.570

-2

this.router.navigate(['/route1'], { variable1: "Value" }); this.router.navigateByUrl('/route1', { variable1: "Value" });

Please none: if your url is urlencoded use navigateByUrl, if your url is not urlencoded use navigate

edited May 15 '20 at 06:58

answered May 14 '20 at 16:10

Shafqat Jan

79
9

Passing query parameter by using navigateByUrl()

4 Answers4