Extract more than one parameter from URL with Angular

Question

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?

1 and Italy aren't query parameters, they're route parameters. — Joe Clay
– Joe Clay, Commented Jun 1, 2017 at 15:52

Yakov Fain · Accepted Answer · 2017-06-01 15:57:58Z

1

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}

answered Jun 1, 2017 at 15:57

Yakov Fain

12.4k5 gold badges35 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

lapadets Over a year ago

Thanks! But if I have only one single Component. Does something like this make sense: {path: '/api/:id/countries/:country/', component: IndexPageComponent} ?

Yakov Fain Over a year ago

Yes, it'll work. you may not need the leading forward slash though.

CharanRoot · Accepted Answer · 2017-06-01 16:03:45Z

0

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);
  }

answered Jun 1, 2017 at 16:03

CharanRoot

6,3352 gold badges31 silver badges45 bronze badges

Collectives™ on Stack Overflow

Extract more than one parameter from URL with Angular

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related