How can i make dynamic routes in my angular application?

Question

I have the following array

let arr = ['one', 'two', 'three']

which i displayed in my html

<div class="d-flex flex-row" style="border: 1px solid black;">
  <div *ngFor="let menu of arr" class="m-2">
    <a routerLink="{{menu}}" style="color: #007bff">{{ menu }}</a>
  </div>
</div>

now wheni click on the menu, i need to make dynamic routes so at the url i will get http://localhost:8888/one

or when i click two i will get

http://localhost:8888/two

how can i make this dynamically? How can i delacre my routes in the app-routing module file ?

Answer 1

you can do things like this.

[routerLink]="[menu]"

Routing Module

 { path: "menu/:menuNumber", component: YourComponent)