How to get URL data in Angular application.

In angular URL can contain two types of data. These are:

1.  Query Parameters

2. Params (defined by angular)

1: Query Parameters

Query params are optional key-value pairs that appear to the right of ? in an URL. For example, the following URL has two query params, sort, and page,  with respective values ASC and 2 :

http://example.com/articles?sort=ASC&page=2

To extract the above angular provides two methods. One of the methods involves subscribing to changes to the query params and the other just takes the data once(snapshot).

Subscribing to query params method.

This method is useful when you are sure you will change the query params of the current URL internally and you want the angular application to react to the new changes. To use this method we will need the ActivatedRoute.queryParams class. ie

constructor(private activatedRoute: ActivatedRoute) {
  this.activatedRoute.queryParams.subscribe(params => {
        const sort = params.get('sort');
        const page = params.get('page');
        
        console.log(sort); // Print the parameter to the console. 
        console.log(page); // Print the parameter to the console. 
        
        // do something with this data
    });
}

Snapshot query params method.

If you are sure the query params wont change you can use this method. We will still use the ActivatedRoute.snapshot class for this. ie.

constructor(private activatedRoute: ActivatedRoute) {
  const sort = activatedRoute.snapshot.queryParams.get('sort')
  const page = activatedRoute.snapshot.queryParams.get('page')
}

2: Router Params

These are varibale that are passed in the URL path in the application. They look like this.

export const routes: Routes = [
	{ path: 'product-details/:id', component: ProductDetails },
    { path: 'product/:id/user/:handle', component: UserProductDetails },
    
]

In the above example, :id and :handle will hold a value that will be extracted in the components that will access them.

In order to extract these params we will use the subscription method or the snapshot method.

Snapshot params method.

This method is adviced to use when you sure the params wonth change after variable are extracted. eg. When you are opening a single page blog and there is nowhere else to click inside the blog to open another blog post page. If there is another post inside the current post, clicking to open it will not open as expected since angular will change the current url params but will not navigate to it has it will reuse the current content. People who dont know this have experienced this issue here url-changes-but-angular-does-not-navigate.

Anyway, this issue will be solved using subscribe method.

We use the snapshot like this.

constructor(private activatedRoute: ActivatedRoute) {
 const id = activatedRoute.snapshot.paramMap.get('id');
  const handle = activatedRoute.snapshot.paramMap.get('handle');
  
  // do someth with this data
}

Subscribe params method.

This method is useful when your are sure your path/URL parems are dynamic like in the example I give previously about a blog post. We use this method like below.

constructor(private activatedRoute: ActivatedRoute) {
 activatedRoute.params.subscribe(
  const id = params.get('id');
   const handle = params.get('handle');
 );
  
  // do someth with this data
}

It is as simple as that.