How get value from url in angular 2

Question

I am trying to get value but it not working. below is my url I want to get 1 from url as number

https://localhost:44300/Portal#/user-edit/1

constructor(private router: Router,
    private userService: UserService) {

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

micronyks · Accepted Answer · 2016-09-07 08:04:35Z

5

You should inject ActivatedRoute to get route params as shown below,

constructor(private router: Router,
    private userService: UserService,
    private route: ActivatedRoute,) {  //<----- here

    this.route.params.subscribe(params => {
            this.id = +params['id'];   //<----- + sign converts string value to number
});

read more here : https://angular.io/docs/ts/latest/guide/router.html#!#route-parameters

edited Sep 7, 2016 at 8:04

answered Sep 7, 2016 at 7:58

micronyks

55.6k17 gold badges122 silver badges166 bronze badges

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

2 Comments

kds23 Over a year ago

How about using route.snapshot.params['id'] ?

callback Over a year ago

@kds23 if the id doesnt change (i.e. clicking on next button that displays another product without reinitializing the component) then you can use route.snapshot.params. But it's generally safer to use an observable.

marvedly · Accepted Answer · 2017-12-06 14:30:22Z

1

Awesome reply! Just an add-on:

The property names have been updated. Use paramMap instead of params and queryParamMap instead of queryParams

See https://angular.io/guide/router#activated-route

An example:

constructor(private activatedRoute: ActivatedRoute) { }
    ngOnInit() {
    this.activatedRoute.paramMap.subscribe((params: ParamMap) => {
        console.log(params.get("id"));
    })
}

See this link for the available methods: https://angular.io/api/router/ParamMap

edited Dec 6, 2017 at 14:30

answered Sep 8, 2017 at 19:17

marvedly

535 bronze badges

Collectives™ on Stack Overflow

How get value from url in angular 2

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