What is Angular's ActivatedRoute and how do I use it?

What is Angular's ActivatedRoute and how do I use it?

Angular's ActivatedRoute is a service that provides access to information about a route associated with a component loaded in an outlet. You can use it to get route parameters, query parameters, and more.

Can you give me an example of how to retrieve route parameters?

Sure! You can inject ActivatedRoute in your component and use the params observable to get route parameters. For example:

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

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.params.subscribe(params => {
    console.log(params['id']); // Access the 'id' parameter
  });
}

What if I want to get query parameters instead?

You can use the queryParams observable in a similar way. Here's an example:

this.route.queryParams.subscribe(queryParams => {
  console.log(queryParams['search']); // Access the 'search' query parameter
});

Is there a way to navigate programmatically using ActivatedRoute?

Yes! You can use the Router service along with ActivatedRoute to navigate. For example:

this.router.navigate(['path', { id: someId }]);