Angular: How to exclude certain param values in angular Route configuration

492 Views Asked by At

I am defining my route like this

const routes: Routes = [
  {
    path: ':id',
    component: PickUpWrapperComponent,
    resolve: { request: PickupRequestResolverService },
    children: [
      {
        path: '',
        component: fromContainers.PickUpRequestComponent,
        pathMatch: 'full',
        canDeactivate: [CanDeactivateGuard],
      },
    ],
  },
  { path: '', redirectTo: 'Create', pathMatch: 'full' },
];

The type of url I connect with is {baseurl}/3 and the routes works fine, I can read the value 3 as route params id.

My requirement is to exclude the path where id=Create, so basically this url {baseurl}/Create should not match with the above route pattern.

Is there any way to pass the exclude value for the id pattern?

Where we can define some rule which says, accept any value for id except for value 'Create'

So something like, where id !== 'Create'

1

There are 1 best solutions below

4
On

When going to a route, ANgular will read all routes of your configuration and go to the first one matching the URL.

This means that if you declare your "create" route before your ":id" route, then going on "create" page, will display the "CreateComponent", but going on "3" will display your "IdComponent".

Here is a working example

    RouterModule.forRoot([
      { path: 'create', component: CreateComponent },
      { path: ':id', component: HelloComponent },
    ]),