How to use Advanced Routing Features In Angular

In addition to the basic route configuration, Angular provides several advanced routing features that allow you to handle dynamic navigation and pass data between components using routing parameters.

Route Parameters:

Route parameters are placeholders in the URL that can be used to pass dynamic values. They are defined within the route’s path and are denoted by a colon followed by the parameter name. For example,

{
  path: 'users/:id',
  component: UserComponent
}

In the above configuration, :id is a route parameter representing the user’s ID. When the URL matches this route pattern, Angular extracts the value from the URL and makes it available to the component.

To access the route parameter within the component, we can use the ActivatedRoute service provided by Angular.

import { ActivatedRoute } from '@angular/router';

@Component({ ... })
export class UserComponent {
  constructor(private route: ActivatedRoute) {
    this.route.params.subscribe(params => {
      const userId = params['id'];
    });
  }
}

The params property of the ActivatedRoute object provides access to the route parameters. By subscribing to the params observable, we can retrieve and use the parameter value within the component.

Child Routes:

Angular allows creating nested routes by defining child routes within a parent route. This approach is useful when building complex applications with hierarchical navigation structures.

Define Parent and Child Routes:

In the routes array, define a parent route that contains a children property. The children property should be an array of Route objects representing the child routes. Each child route can have its own path, component, and additional properties.

Configure Child Routes:

In the parent component’s template, add a <router-outlet></router-outlet> directive to serve as a placeholder for rendering the child components. When a child route is activated, Angular automatically renders the corresponding child component within this outlet.

const routes: Routes = [
  {
    path: 'products',
    component: ProductsComponent,
    children: [
      { path: ':id', component: ProductDetailComponent },
      { path: ':id/edit', component: ProductEditComponent }
    ]
  }
];

Here, ProductsComponent acts as parent, and ProductDetailComponent,ProductEditComponent acts as child components, and the route for them will be appended after `products`.

In Angular, configuring routes is an important part of building single-page applications (SPAs) and managing navigation between different components. By defining routes, we can map URLs to specific components, enabling users to access different views within our application.

This enhances user experience by providing a seamless and dynamic interaction. Configuring routes correctly is important for building a robust and user-friendly application. In this article, let us discuss the process of configuring routes in Angular and explore different approaches to achieve this.