Adding Dynamic routes in angular

Question

I have created a parent and child route in angular 8 application. One of my child routes called agreement needs to be dynamic. Which means if there are three agreements , there should be three sidenav menus showing the route to the individual page. For example agreement 1, agreement 2, agreement 3 etc . I would know the number of the agreements at the time of load of the agreements component.

How do I create agreement dynamically. As you can see now it is static. I have also attached the screenshot to see how it appears.

screenshot

app.route

import { Routes } from '@angular/router';
import { NgxPermissionsGuard } from 'ngx-permissions';
import { MsalGuard } from '@azure/msal-angular';

import { SecurityPermissions } from './shared/constants/securityPermissions';
import { HomeGuard } from './shared/services/home.guard';

export const AppRoutes: Routes = [
  {
    path: '',
    loadChildren: './modules/client-home/client-home.module#ClientHomeModule',
    canActivate: [HomeGuard]
  },
  {
    path: 'client-home',
    loadChildren: './modules/client-home/client-home.module#ClientHomeModule',
    canActivate: [MsalGuard, NgxPermissionsGuard],
    data: {
      permissions: {
        only: [SecurityPermissions.organisation.AccessOrganisation]
      }
    }
  },
  {
    path: 'individual-business-application',
    loadChildren: './modules/iba/iba.module#IbaModule',
    canActivate: [MsalGuard, NgxPermissionsGuard],
    data: {
      permissions: {
        only: [
          SecurityPermissions.iba.CompleteIba,
          SecurityPermissions.iba.ViewIbaSummary
        ]
      }
    }
  },
  { path: '**', redirectTo: '/' }
];

iba child route

const ibaRoutes: Routes = [
  {
    path: '',
    canActivate: [IbaGuard],
    component: IbaComponent,
    resolve: { model: IbaResolve },
    children: [
      {
        path: '', redirectTo: 'summary'
      },
      {
        path: 'load/:clientRef',
        component: ContactComponent,
        data: { hidden: true }
      },
      {
        path: 'contact',
        component: ContactComponent,
        data: {
          title: '1. Contact',
          role: [SecurityPermissions.iba.CompleteIba],
          order: 1,
          sectionName: SectionNames.iba,
          baseAddress: 'individual-business-application',
          hidden: false
        }
      },
      {
        path: 'address',
        component: AddressComponent,
        data: {
          title: '2. Address',
          role: [SecurityPermissions.iba.CompleteIba],
          order: 2,
          sectionName: SectionNames.iba,
          baseAddress: 'individual-business-application',
          hidden: false
        }
      },
      {
        path: 'employment',
        component: EmploymentComponent,
        data: {
          title: '3. Employment',
          role: [SecurityPermissions.iba.CompleteIba],
          order: 3,
          sectionName: SectionNames.iba,
          baseAddress: 'individual-business-application',
          hidden: false
        }
      },
      {
        path: 'fitness',
        component: FitnessComponent,
        data: {
          title: '4. Fitness',
          role: [SecurityPermissions.iba.CompleteIba],
          order: 4,
          sectionName: SectionNames.iba,
          baseAddress: 'individual-business-application',
          hidden: false
        }
      },
      {
        path: 'identification-questions',
        component: IdentificationComponent,
        canActivate: [NgxPermissionsGuard],
        data: {
          title: '5. Identification',
          permissions: {
            only: [SecurityPermissions.iba.UploadIbaIdentification]
          },
          role: [SecurityPermissions.iba.UploadIbaIdentification],
          order: 5,
          sectionName: SectionNames.iba,
          baseAddress: 'individual-business-application',
          hidden: false
        }
      },
      {
        path: 'additional-information',
        component: AdditionalInformationComponent,
        canActivate: [NgxPermissionsGuard],
        data: {
          title: 'Additional Information',
          permissions: {
            only: [SecurityPermissions.iba.UploadIbaIdentification]
          },
          role: [SecurityPermissions.iba.UploadIbaIdentification],
          order: 6,
          sectionName: SectionNames.iba,
          baseAddress: 'individual-business-application',
          hidden: true
        }
      },
      {
        path: 'agreement',
        component: MultiAgreementComponent,
        data: {
          title: '6. Agreement',
          order: 7,
          sectionName: SectionNames.iba,
          baseAddress: 'individual-business-application',
          hidden: false
        }
      },
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(ibaRoutes)],
  exports: [RouterModule]
})
export class IbaRoutingModule {}

Answer 1

I hope that I got your question right. Here is something you could do:

1. Store the agreements in a service as soon as you know them:

yourService.agreements = [{ id: '1' }, { id: '2' }, { id: '3' }];

2. Generate a new guard, change the path for agreements to agreement/:agreement and add canActivate[YourGuard]

...
    path: 'agreement/:agreement',
    canActivate: [YourGuard],
...

3. Implement YourGuard

1. Necessary so that the user cannot navigate to .../agreement/<agreement> if <agreement> does not exist
2. If you find the agreement in your service class, return true, if not return false
3. Please note that I also added this.router.navigate(('' as unknown) as any[]) in order to avoid being redirected to a blank page. This is a workaround for a known issue that seemed to work for me. I wrote a bit more about it here

export class YourGuard implements CanActivate {
    constructor(private yourService: YourService, private router: Router) {}

    canActivate(
        next: ActivatedRouteSnapshot,
        state: RouterStateSnapshot
    ): boolean {
        const param = next.paramMap.get('agreement');
        if (!!this.yourService.agreements.find(a => a.id === param)) {
            return true;
        } else {
            this.router.navigate(('' as unknown) as any[]);
            return false;
        }
    }
}

4. Now you can get the agreement in your component

export class MultiAgreementComponent implements OnInit {
    agreement: { id: string };

    constructor(
        private activatedRoute: ActivatedRoute,
        private yourService: YourService
    ) {}

    ngOnInit(): void {
        const param = this.activatedRoute.snapshot.paramMap.get('agreement');
        this.agreement = this.yourService.agreements.find(a => a.id === param);
    }
}

5. In order to list all links to the components you can simply use *ngFor

I built a simlple version of your app in order to test this, so the routerLink may differ:

<div *ngFor="let agreement of yourService.agreements">
  <a routerLink="agreement/{{ agreement.id }}">
    Agreement {{ agreement.id }}
  </a>
</div>

I hope this answer solved your problem. Feel free to ask if something is not clear yet.