javascriptangulartypescriptangular7angular-routing

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

Solution

  • Simply use string interpolation

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