[Angular2 Router] Optional Route Query Parameters - The queryParams Directive and the Query Parameters Observable

In this tutorial we are going to learn how to use the Angular 2 router to pass optional query parameters from one route into another route. There are couple of ways of doing this from the source route perspective: we use the queryParams property in the navigate API call, or we can use the queryParams directive.

On the receiving side, and especially in the case of detail child routes where we want to navigate from one detail into the other, we are going to see how to use the queryParams observable to receive the navigation query parameters.

First way, using in html:

    <a [routerLink]="hero.id"
       routerLinkActive="active"
       [queryParams]="{description: 'Starwar Hero '}"
       [routerLinkActiveOptions]="{exact: true}">{{hero.name}}</a>

Second way, using in JS:

  getHeroByIndex(i){
   // this.router.navigateByUrl(`/heros/${i}`);
   // this.router.navigate(['heros', i]);
    this.router.navigate([i], {
      relativeTo: this.route,
      queryParams: {
        description: 'Star war Hero'
      }
    })
  }

Read the query param:

export class HeroComponent implements OnInit {

  hero: Observable<any>;
  description: string;

  constructor(private router: ActivatedRoute,
              private starwarService: StarWarsService) {

  }

  ngOnInit() {
    /* this.hero = this.router.params
     .map((p:any) => p.id)
     .switchMap( id => this.starwarService.getPersonDetail(id));
     */

    // since herocomponent get init everytime, it would be better to use snapshot for proferemence
    const heroId = this.router.snapshot.params['id'];
    this.hero = this.starwarService.getPersonDetail(heroId);

    this.router.queryParams.subscribe(
      param => this.description = param['description']
    )
  }

}

In url, it looks like:

http://localhost:4200/heros/4?description=Starwar%20Hero%20

Github