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

Question

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.

@NadunLiyanage It is redirected to company/:id, hence have a component 'CompanyComponent' — VIshal Jain
– VIshal Jain, Commented Oct 25, 2017 at 10:13

Nadun Liyanage · Accepted Answer · 2017-10-25 10:32:39Z

4

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 } });

answered Oct 25, 2017 at 10:32

Nadun Liyanage

4633 silver badges10 bronze badges

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

Comments

Veena K. Suresh · Accepted Answer · 2017-10-25 09:34:00Z

0

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']; 
  }

}

answered Oct 25, 2017 at 9:34

Veena K. Suresh

1,0128 silver badges17 bronze badges

1 Comment

VIshal Jain Over a year ago

I used this, but it didn't solved my problem. Though I got a way out by nesting my routes and it solved this issue.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related