CODEWITHSUNDEEP
javascriptangulartypescriptangular7angular-routing
trx
trx

Reputation: 2157

Passing query parameter by using navigateByUrl()

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' },
      }

Upvotes: 11

Views: 31051

Answers (4)

Miguel Pinto
Miguel Pinto

Reputation: 563

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

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

Upvotes: 15

Shafqat Jan
Shafqat Jan

Reputation: 75

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

Upvotes: -4

MuruGan
MuruGan

Reputation: 1420

Simply use string interpolation

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

Upvotes: 7

Chiffie
Chiffie

Reputation: 621

// 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

Upvotes: 4

Related Questions