In this blog post, we are continuing our discussion on routing in Angular from our previous post.

Matching the full path

Sometimes you want the router to only load the component if fully matches the path in the address bar in the browser. Angular router can handle this by using the key value pair pathMatch: 'full'. Here’s an example:

{ path: 'offices', pathMatch: 'full', component: OfficeListComponent }

When using pathMatch: 'full' the router will load the component only if the URL in the browser’s address bar matches the route path to this component.

Full path can also be used to match the home component that was used in the previous blog post { path: '', pathMatch: 'full', component: HomeComponent }.


You can also redirect the user to a specific page by using redirectTo, like so:

{ path: '', reidrectTo: '/home', pathMatch: 'full' }

Dynamic parameters

You can also make your routes handle dynamic values that are passed to the route. These values are usually passed between components. In order to use dynamic parameters simply add a colon : before the name of the parameter:

{path: 'user/:id`, component: UserDetailsComponent}

The user Id is passed as the parameter (e.g. user/1, user/2, etc).