How can I set a path first route

Question

I have component tpeDetails that contains children routes(path) that I want to use later to create a router-outlet within this components my code of routing below

{
path: "tpeDetails/:id",
component: TpeDetailsComponent,
children: [
  { path: "", redirectTo: "map", pathMatch: "full" },
  {
    path: "map",
    component: MapTpeComponent,
    outlet: "tpeDashboard",

    pathMatch: "full",
  },
  {
    path: "chart",
    component: ChartTpeComponent,
    outlet: "tpeDashboard",
    
  },
],

},

I create a navbar where I put my links to move between components

  <li>
        <div>
          <a
            [routerLink]="[{ outlets: { tpeDashboard: 'map' } }]"
            routerLinkActive="active-item"
            >Map</a
          >
        </div>
      </li>
      <li>
        <div>
          <a
            [routerLink]="[{ outlets: { tpeDashboard: 'chart' } }]"
            routerLinkActive="active-item"
            >Chart</a
          >
        </div>
      </li>

Finally this is my tpeDetails where placed the router-outlet

 <nb-card>
  <nb-card-header>Position</nb-card-header>
  <nb-card-body>
    <router-outlet name="tpeDashboard"></router-outlet>
  </nb-card-body>
</nb-card>

After implementing this component I'm not able to show the map component when tpeDetails rendered , I want when the user click on tpeDetails the router-outlet shows the component of map directly

How can I set a path first route

0 Answers0