Understanding ActivatedRoute in Angular

Angular is a powerful framework for building dynamic web applications and provides several tools to simplify development tasks. One such tool is the ActivatedRoute service. The ActivatedRoute service provides a way to access information about a route associated with a component loaded by the router.

What is ActivatedRoute?

The ActivatedRoute service is one of the core services provided by the Angular router. It represents the route associated with a component and provides access to various route parameters, data, and other features.

The ActivatedRoute service is typically injected into the constructor of a component, which allows the component to access information about the current route.

How to use ActivatedRoute?

The ActivatedRoute service can be used in several ways to access information about the current route. Here is an example of how to use the ActivatedRoute service:

  import { Component, OnInit } from '@angular/core';

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



  @Component({

    selector: 'app-example',

    templateUrl: './example.component.html',

    styleUrls: ['./example.component.css']

  })

  export class ExampleComponent implements OnInit {



    constructor(private route: ActivatedRoute) { }



    ngOnInit(): void {

      //Accessing route parameters

      const id = this.route.snapshot.paramMap.get('id');



      //Accessing query parameters

      const name = this.route.snapshot.queryParamMap.get('name');



      //Accessing resolved data

      const data = this.route.snapshot.data;

    }



  }

In the above example, the ActivatedRoute service is injected into the constructor of the ExampleComponent. We can then use the ActivatedRoute service to access various route parameters, query parameters, and resolved data, as shown in the ngOnInit method.

Route Parameters

Route parameters are placeholders in a URL that can be used to pass data to a component. For example, consider the following URL:

http://example.com/products/123

Here, the “123” is a route parameter that can be used to identify a specific product. We can access this route parameter using the ActivatedRoute service, as shown below:

  ngOnInit(): void {

    //Accessing route parameters

    const id = this.route.snapshot.paramMap.get('id');

    console.log(id); //outputs: 123

  }

Here, we are using the “paramMap” property of the ActivatedRoute service to access the route parameters.

Query Parameters

Query parameters are used to pass additional information to a component and are typically passed as key-value pairs in the URL. For example, consider the following URL:

http://example.com/search?q=angular

Here, the “q” parameter is a query parameter that can be used to search for a specific term. We can access this query parameter using the ActivatedRoute service, as shown below:

  ngOnInit(): void {

    //Accessing query parameters

    const name = this.route.snapshot.queryParamMap.get('q');

    console.log(name); //outputs: angular

  }

Here, we are using the “queryParamMap” property of the ActivatedRoute service to access the query parameters.

Resolved Data

Resolved data is data that is resolved by the router before a component is loaded. This can be useful for pre-fetching data or for resolving dependencies before a component is loaded. We can access resolved data using the ActivatedRoute service as shown below:

  ngOnInit(): void {

    //Accessing resolved data

    const data = this.route.snapshot.data;

    console.log(data); //outputs: {user: {id: 123, name: 'John Doe'}}

  }

Here, we are using the “data” property of the ActivatedRoute service to access the resolved data.

FAQs

What is the difference between ActivatedRoute and Router?

The ActivatedRoute service is used to access information about the current route, whereas the Router service is used to navigate to other routes. The ActivatedRoute service is typically injected into a component, whereas the Router service is typically used in a template or in a service.

How do I access the parent route parameters?

To access parent route parameters, you can use the “parent” property of the ActivatedRoute service. For example:

  ngOnInit(): void {

    //Accessing parent route parameters

    const id = this.route.parent.snapshot.paramMap.get('id');

    console.log(id); //outputs: 123

  }

Here, we are using the “parent” property of the ActivatedRoute service to access the parent route parameters.

How do I access the current activated route?

To access the current activated route, you can use the “root” property of the ActivatedRoute service. For example:

  constructor(private route: ActivatedRoute) { }



  ngOnInit(): void {

    //Accessing current activated route

    const currentRoute = this.route.root;

    console.log(currentRoute); //outputs: current activated route

  }

Here, we are using the “root” property of the ActivatedRoute service to access the current activated route.