Angular routes with params and getting params

Question

A user will be clicking a link in an email like this:

do-something/doSomething?thing=XXXXXXXXXXX

How can I define the route in the router and subscribe to get params?

Currently in router I have:

    {
     path: 'do-something/:id',
     component: DoSomethingComponent
    },

In the component:

    ngOnInit() {
     this.sub = this.route
      .params
      .subscribe(params => {
       console.log(params)
      });
    }

However, the route never matches. Shouldn't ":id" consider anything after reset-password as a param?

Pranay Rana · Accepted Answer · 2017-11-28 17:33:42Z

4

this one i got for angular site

import { Component, OnInit }  from '@angular/core';
import { ActivatedRoute }     from '@angular/router';
import { Observable }         from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Component({
  template:  `
    <p>Dashboard</p>
    <p>Session ID: {{ sessionId | async }}</p>
  `
})
export class AdminDashboardComponent implements OnInit {

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
   //read query param
    this.route
      .queryParamMap
      .map(params => console.log(params.get('thing')););

     //read param value 
      this.route
      .paramMap
      .map((params: ParamMap) => 
                           console.log(params.get('id')));
  }
}

Read Routinh here : https://angular.io/guide/router#!#optional-route-parameters

try like this

const appRoutes: Routes = [
  { path: 'do-something/:id', component: DoSomethingComponent, name: 'Details'}];

now navigation like

this.router.navigate( [
  'Details', { id: 'idvalue', param1: 'value1'
}]);//this you can try from code

this match

do-something/idvalue?param1=value1. //this try from browser

read query param like this

ngOnInit() {
  // Capture the access token and code
  this.route
      .queryParams
      .subscribe(params => {
          let thing = params['thing'];
      });
}

or try this

(new URL(location)).searchParams.get("parameter_name")

edited Nov 28, 2017 at 17:33

answered Nov 28, 2017 at 16:56

Pranay Rana

177k37 gold badges244 silver badges267 bronze badges

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

4 Comments

Anthony Over a year ago

what route have you defined in the router?

Pranay Rana Over a year ago

@Anthony - define route in route.ts file

Anthony Over a year ago

When I subscribe to route and console.log(params) I only get {id: "idvalue"} not the other param values

Pranay Rana Over a year ago

@Anthony- thanks to you i am also trying at my end becuase i never tried this in my example ...

Manohar Reddy Poreddy · Accepted Answer · 2019-09-01 20:09:05Z

1

More than 1 hour wasted.

Both below did not work:
this.route.paramMap &
this.route.params

Only below worked:
this.route.queryParams

1.URL is like this:

http://localhost:4200/employee?tab=admin

2.Need to extract the value of query parameter tab, which is admin

3.Code that worked is:

ngOnInit() {
   this.route.queryParams.subscribe(params => {
    console.error(" ==== ", params["tab"]); // this will print `admin`
    // this.tabNameFromUrl = params["tab"];
  });
}

Hope that helps.

answered Sep 1, 2019 at 20:09

Manohar Reddy Poreddy

28k10 gold badges170 silver badges150 bronze badges

2 Comments

Prid Over a year ago

http://localhost:4200/employee?id=13 => queryParams ----------------- http://localhost:4200/employee/13 => params

Manohar Reddy Poreddy Over a year ago

The question did start with query params URL. Thanks for the additional details, your details will help someone soon.

Collectives™ on Stack Overflow

Angular routes with params and getting params

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related