CODEWITHSUNDEEP
angularroutesangular2-routing
VIshal Jain
VIshal Jain

Reputation: 622

Pass query params in 'Router module' Routes array and read in component

I'm trying to differentiate between the sample companies and other companies. So I'm passing query params to check if it is sample company and check the query param sample if it is true in Route array like this 

const routes: Routes = [{ path: '',
    component: DefaultComponent,
    children: [
        {path: 'company', redirectTo: 'company-data/1?sample=true'},
        {path:'company/:id', component: CompanyComponent}
]}];

How can I read this query param in component and fetch true value for sample company and for other companies that sample will be false. I get undefined if I try to fetch it like this 

this.route.queryParams.subscribe(params => {
    console.log('Query params ',params['sample']) 
});

I don't know if this is right way.

Upvotes: 1

Views: 18377

Answers (2)

Nadun Liyanage
Nadun Liyanage

Reputation: 463

queryParams are optional parameters. You do not need to specify them in the Routes module. But for this, you need to be sure that you not only pass the id=1

const routes: Routes = [{ path: '',
component: DefaultComponent,
children: [

    {path:'company/:id', component: CompanyComponent}
]}];

and you can simply call the component by router.navigate(['/', 'company', 1], { queryParams: { sample: true } });

Upvotes: 4

Veena K. Suresh
Veena K. Suresh

Reputation: 1002

import activatedRoute from your router module and assign query parameter inside your component

import { ActivatedRoute } from '@angular/router';

export class CompanyComponent { 

  isSample: boolean; 

  constructor(private routeParams: ActivatedRoute) { 
    this.isSample = routeParams.snapshot.params['sample']; 
  }

}

Upvotes: 0

Related Questions