How to create dynamic routing with JSON Server Rest API

user_19884736 0
Viewed 72

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;
});
angular-ui-router angular-material angular
2 Answers
   <li class="nav-item active" *ngFor="let users of user">
    <a class="nav-link" [routerLink]="{{users.routerLink}} >
      {{ users.title }}
    </a>
   </li>

      // and in app-routing-module.ts 

 const routes: Routes = [
 { path: 'item.routerLink1', component: 'FirstComponent' },
 { path: 'item.routerLink2', component: 'SecondComponent' }];


 @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
  })
user_198797040

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"
    }
  ],
user_198847360
Related