CODEWITHSUNDEEP
angularroutes
gaurav oberoi
gaurav oberoi

Reputation: 463

Routing to dynamic location according to json file

I have a json file where I have the info of menu and their routerlinks:

app.compoment.ts:

this.menusList = [
    {label:'Alerts',
    items: [
                    {label: 'Alert-New', icon: 'pi pi-fw pi-plus', routerLink: 'pagename'}

           ]
    },

    {label:'Group',
    items: [
                    {label: 'Group-Create', icon: 'pi pi-fw pi-plus', routerLink: 'group-create'},
                    {label: 'Group-Manage', icon: 'pi pi-fw pi-download', routerLink: 'group-manage'},
                    {label: 'Group-Upload', icon: 'pi pi-fw pi-upload', routerLink: 'group-create'}
                ]
    },

    {label:'Location',
    items: [
                    {label: 'Location-Create Temporary', icon: 'pi pi-fw pi-plus', routerLink: 'location-create-temporary'},
                    {label: 'Location-Manage', icon: 'pi pi-fw pi-download', routerLink: 'location-manage'},
                    {label: 'Location-Related Groups Search', icon: 'pi pi-fw pi-upload', routerLink: 'location-related-group-search'}
                ]
    }

    ]

Now I can use ngFor to get the values like so (i am using primeNG):

<div *ngFor="let nm of menusList">

 <p-menu #menu [popup]="true" [model]="nm.items"></p-menu>
 <button type="button" pButton icon="pi pi-bars" label="Show" (click)="menu.toggle($event)">{{nm.label}}</button>

</div>

<router-outlet></router-outlet>

Every link is taking me to the link according to routerlink key in json. SO this is fine. Now i want to know how to configure the routes for these dynamic links:

for ex in normal routes we use something like:

const routes: Routes = [

  { path: 'pagename', component: Page1Component }

]

but now with dynamic links coming, how do I navigate to the respective component? Please help me. Thanks.

Upvotes: 0

Views: 515

Answers (1)

Abolfazl Roshanzamir
Abolfazl Roshanzamir

Reputation: 14792

To do that you can use router.resetConfig or router.config.push

router.resetConfig:

Resets the configuration used for navigation and generating links.

constructor(private router: Router, private route: ActivatedRoute) {}

const config = this.router.config;
config.push({
        path: 'dynamicRoutePath',
        component: DynamicRouteComponent,
    });

this.router.resetConfig(config);
this.router.navigate(['dynamicRoutePath'], {relativeTo: this.route});

router.config.push:

Dynamically update the routing configuration and trigger navigation.

this.router.config.push({ path: 'somePath', component: SomeComponent });

Upvotes: 1

Related Questions