Pass param to Angular 2 (RC4) application

Question

I would like to initially pass parameters to my Angular2 application via url query parameters. So if a user types http://myapp.com?r=www.stackoverflow.com into the address bar of the browser I would like to get the value of parameter r to store it in sessionStorage and use it later. I do not want to pass that value around from component to component.

What is the correct way to do that? Do I need to configure it in my routes and if so, how can I do that?

    export const routes: RouterConfig = [
       { path: ':r', component: LandingComponent },
    ....

That did not work or I could not figure out how to get the value.

Thanks for your Help!

Do you want to pass them from the browser URL bar or from the default route? Is the question about how to add them in code, or how to read them in code? — Günter Zöchbauer, Aug 05 '16 at 16:22
@GünterZöchbauer I want to pass in the parameter from the browser URL so the question is about reading it in code. E.g. when calling my app with `http://myapp.com?r=www.stackoverflow.com`i want to read the value of parameter `r` at startup and then use it later at some point. — tschuege, Aug 06 '16 at 08:17
It seems like answer. It helped to me. [answer](http://stackoverflow.com/questions/38488568/angular-2-rc4-activatedroute-query-string-params/38560010#38560010) — Ruslan Masgutov, Aug 22 '16 at 13:53

Jorawar Singh · Answer 1 · 2016-08-05T16:57:07.100

1

you can pass parameter to url like this

<a [routerLink]="['/about', { foo: 'foo' }]">About</a>

import { Component ,   OnInit  } from "@angular/core";
import { Title } from "@angular/platform-browser";
import { ActivatedRoute }   from "@angular/router";
import { Observable }     from "rxjs/Observable";

@Component({
    template: "<h1>About page! {{ paramName | async }}</h1>",
})

export class AboutComponent implements OnInit {
      public constructor(private route: ActivatedRoute) {}
   public paramName: Observable<string>;
   public ngOnInit() {
       // console.log("App component loaded");
        this.setTitle( "about" );
        this.paramName = this.route.params.map(params => params["foo"] || "None");
    }
};

edited Aug 05 '16 at 16:57

answered Aug 05 '16 at 16:26

Jorawar Singh

7,463
4
26
39

This works for passing parameters from one component to another. What I'm struggling with is passing in a parameter at startup. So when starting my app with `http://myapp.com?r=www.stackoverflow.com` I want to capture the value of param `r` at startup and then forget about it. – tschuege Aug 06 '16 at 08:14
1

this should be what you are looking for but `queryParams` instead of `params'. This is *not* for passing params between components. – Günter Zöchbauer Aug 06 '16 at 09:00
@GünterZöchbauer According to the [docs](https://angular.io/docs/ts/latest/api/router/index/ActivatedRoute-interface.html) there is no queryParams in ActivatedRoute on RC4. Params is of type Observable -- but when I subscribe to it like that `this.activatedRoute.params .map(params => params['r']) .subscribe((r) => { alert("r: " + r); });` I don't get the value passed in via URL. `this.activatedRoute.snapshot.params.r`does also not contain the value. – tschuege Aug 07 '16 at 16:09
I think quetyParam is on Route not on ActivedRoute. If you try as mentioned in answer you should have the value. – Jorawar Singh Aug 07 '16 at 16:15
@JorawarSingh activatedRoute is the name I gave it in the constructor. As long as it's of type ActivatedRoute it does not matter how you name it. – tschuege Aug 08 '16 at 06:27
import { Router } from "@angular/router" constructor(private router: Router) – Jorawar Singh Aug 08 '16 at 06:32

score 0 · Answer 2 · edited Dec 26 '21 at 06:45

0

You have configured the route correct, Below is the solution how to get the query param.

Here is the Plunker!!

export const routes: RouterConfig = [
   { path: '', redirectTo: '123', terminal: true },
   { path: ':id', component: LandingComponent   }
];

  @Component({
   selector: 'landing-component',
   template: `
   landing component
  `
  })
  export class LandingComponent   {
   id = "";
   constructor(private route: ActivatedRoute) {}
 
   ngOnInit() {
    const s: ActivatedRouteSnapshot = this.route.snapshot;
    this.id = s.params["id"];
    console.log(this.id);
   }
  }

edited Dec 26 '21 at 06:45

Glorfindel

21,988
13
81
109

answered Aug 05 '16 at 17:44

Madhu Ranjan

17,334
7
60
69

Not sure if I understand you right. This passes the value 123 from the "main component" to the landing component. But I want to initially pass in the value 123 via the URL of the browser. – tschuege Aug 06 '16 at 08:20

score 0 · Accepted Answer · answered Sep 14 '16 at 12:58

I finaly solved it by getting document injected into the constructor

constructor(@Inject(DOCUMENT) private document: any)

and then getting the parameters as in vanilla JavaScript from

this.document.location.search

That works for me but I'm not sure if it works in all environments Angular2 can run on.

Pass param to Angular 2 (RC4) application

3 Answers3