How to get query params from url in Angular 2?

by

By injecting an instance of ActivatedRoute one can subscribe to a variety of observables, including a queryParams and a params observable:

import {Router, ActivatedRoute, Params} from '@angular/router';
import {OnInit, Component} from '@angular/core';

@Component({...})
export class MyComponent implements OnInit {

  constructor(private activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    // Note: Below 'queryParams' can be replaced with 'params' depending on your requirements
    this.activatedRoute.queryParams.subscribe(params => {
        const userId = params['userId'];
        console.log(userId);
      });
  }

}

A NOTE REGARDING UNSUBSCRIBING

@Reto and @codef0rmer had quite rightly pointed out that, as per the official docs, an unsubscribe() inside the components onDestroy() method is unnecessary in this instance. This has been removed from my code sample. (see blue alert box in this tutorial)

More Related Contents:

  1. *ngFor running an infinite loop in angular2
  2. Angular 2 @ViewChild annotation returns undefined
  3. How to return value from function which has Observable subscription inside?
  4. How do I actually deploy an Angular 2 + Typescript + systemjs app?
  5. Define global constants
  6. How to inject Document in service?
  7. When I refresh my website I get a 404. This is with Angular2 and firebase
  8. WARNING: sanitizing unsafe style value url
  9. Angular2: How to load data before rendering the component?
  10. Extending component decorator with base class decorator
  11. How can I listen for keypress event on the whole page?
  12. How do you deploy Angular apps?
  13. How to avoid imports with very long relative paths in Angular 2?
  14. Select based on enum in Angular2
  15. Angular2 handling http response
  16. Angular no provider for NameService
  17. Angular 2 2.0.0-rc.1 Property ‘map’ does not exist on type ‘Observable’ not the same as issue report
  18. Accessing a property in a parent Component
  19. TypeScript error in Angular2 code: Cannot find name ‘module’
  20. angular2 bootstrap with data from ajax call(s)
  21. How to use select/option/NgFor on an array of objects in Angular2 [duplicate]
  22. Get route query params
  23. RxJs get value from observable
  24. How to create an Observable from static data similar to http one in Angular?
  25. Angular 2 ngModel in child component updates parent component property
  26. Angular2 – root relative imports
  27. Angular2 HTTP GET – Cast response into full object
  28. Angular 2 loader on each http request
  29. detect change of nested property for component input
  30. How to place a dynamic component in a container

Leave a Comment