ActivatedRoute in Angular

For more questions and answers visit our website at Frontend Interview Questions

ActivatedRoute is a service provided by Angular's RouterModule. It contains information about the route associated with a component loaded into an outlet. This information includes the route parameters, query parameters, URL fragments, and more. ActivatedRoute helps you access and utilize this information to create dynamic and responsive applications.

Key Features of ActivatedRoute

1. Route Parameters: Access parameters passed in the URL.
2. Query Parameters: Access parameters appended to the URL after a ?.
3. URL Fragment: Access the fragment identifier (the part after # in the URL).
4. Route Data: Access static data associated with a route.
5. Child Routes: Access child routes of the current route.

Example: Using ActivatedRoute in Angular

To demonstrate how to use ActivatedRoute, let's create a simple Angular application with a few routes and a component that displays route parameters and query parameters.

Step 1: Set Up the Angular Application

First, create a new Angular application if you don’t have one already:

ng new activatedroute-example
cd activatedroute-example

Step 2: Define Routes in the App