CODEWITHSUNDEEP
angularurltypescript
lapadets
lapadets

Reputation: 1095

Extract more than one parameter from URL with Angular

I am making a simple Angular (version 4) application with TypeScript.

I have an URL that looks like this: www.example.com/api/1/countries/Italy/

And I want to get 1 and Italy from this URL and assign them to variables.

I tried with ActivatedRoute like this:

 ngOnInit() {
    this.router
        .queryParams
        .subscribe(params => {
           this.id = +params[''];
           this.country = +params[''];
        });
}

Where idand country are my private variables I want to assign with the values from the URL. But I don't know how exactly to proceed...

What else do I need to do?

Upvotes: 0

Views: 1251

Answers (2)

CharanRoot
CharanRoot

Reputation: 6325

you can access url using DOCUMENT and parse it.

component.ts 

import { DOCUMENT } from '@angular/platform-browser';

  constructor(@Inject(DOCUMENT) document: any) {
    console.log(document.location.href);
  }

Upvotes: 0

Yakov Fain
Yakov Fain

Reputation: 12376

In your URL example you don't use query parameters. So the code to get values from the ActivatedRoute could look like this:

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

This code assumes that you have configured your routes with params named id and country, e.g. 

 {path: 'api/:id', component: CompA}
   ...
 {path: 'countries/:country', component: CompB}




Upvotes: 1

Related Questions