How to create dynamic routing with JSON Server Rest API

Question

I am using JSON server fake rest API in angular14 and creating a dynamic menu with JSON file and it perfectly works but I just want to route the menu when the user clicks menu it will be routed the same. I am sharing the code for your convenience.

So, does anyone have a solution to this please let me know. Thank you

db.json

  "users": [
    {
      "displayName": "Home",
      "routerLink": "become-angular-tailer"
    },
    {
      "displayName": "Services",
      "url": "https://blog.angular.io/"
    },
    {
      "displayName": "How it Works",
      "routerLink": "become-angular-tailer"
    },
    {
      "displayName": "About",
      "routerLink": "become-angular-tailer"
    }
  
  ],

Header component.html

     <li class="nav-item active" *ngFor="let users of user">
    
    
            <a class="nav-link" href="#"> {{ users.displayName }}
              {{ users.title }}
    
            </a>
    
       </li>

Header.component.ts

this.service.getPosts().subscribe(response => {
          this.user = response;
});

Answer 1

header.component.html

<li class="nav-item active " *ngFor="let users of user">
   <a class="nav-link" ariaCurrentWhenActive="page" [routerLink]="users.routerLink"> {{ users.displayName }}
   {{ users.title }}
   </a>
</li>

db.json

"users": [
    {
      "displayName": "Home",
      "routerLink": "home"

    },
    {
      "displayName": "Services",
      "routerLink": "service"

      
    },
    {
      "displayName": "How it Works",
      "routerLink": "howitwork"
    },
    {
      "displayName": "About",
      "routerLink": "about-us"
    },
    {
      "displayName": "Download App",
      "routerLink": "download"
    },
    {
      "displayName": "Feature",
      "routerLink": "features"
    },
    {
      "displayName": "FAQ",
      "routerLink": "faq"
    }
  ],