Angular route link with id (REST endpoint)

How to route to with specific id to identify the data from the dataset in angular?

1. Define the path under the parent components. Here "dashboard-home" is my parent component that holds cards.

When clicked to any card the route link will be "card-chart/<number>"

const routes: Routes = [

  {

    path: "",

    component: MainComponent,

    children: [

      {

        path: "dashboard-home",

        component: DashboardComponent,

      },

      {

        path: "dashboard-books",

        component: BooksComponent,

      },

      {

        path: "dashboard-card-chart/:id",

        component: LineChartComponent,

      }

    ],

  },

];

that's why we have to add another path of dashboard.

2. Navigate to the route link from the card component with id to dashboard-card-chart component.

  isCardClicked() {

    console.log(this._id);

    this.router.navigate(["dashboard-card-chart/" + this._id]);

  }