How to define parameter for parent component in Angular 2

Question

I have a class component, that has two subcomponents called students and stats. I have these routes configured for them for now:

const routes: Routes = [
  {
    path: '', component: ClassComponent, children: [
      { path: 'students', component: StudentsComponent },
      { path: 'stats', component: StatsComponent }
    ]
  }
];

And class itself is the child of another component called school.

Now routes are working fine in this level. That is, when browser URL is changed to domain.com/class/students I get students component, and when it's changed to domain.com/class/stats I get stats component.

However, now I need to pass classId as a parameter to the aforementioned routing. I'm stuck at this point, as I have no idea how to include that parameter in routes. Any help is appreciated.

Update: I know that I can have /class/students/1 and /class/stats/1 routes. What I want is to have them like this: /class/1/students and /class/1/stats and also define them only in the class component, not in the children component, and access them both in parent and children components.

Veselin Davidov · Accepted Answer · 2018-04-16 13:45:05Z

2

You can do for example:

{ path: "students/:id", component : StudentsComponent }

Then you will have an Id in the url. In the students component (or maybe a different component - for example StudentsDetailsComponent you will need to get that from the ActiveRouter service.

The constructor of the component:

constructor(
  private route: ActivatedRoute

) {}

Then in the code:

  let id = this.route.snapshot.paramMap.get('id');

Check this link https://angular.io/guide/router

answered Apr 16, 2018 at 13:45

Veselin Davidov

7,0911 gold badge17 silver badges23 bronze badges

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

1 Comment

Mohammad Honari Over a year ago

This is not the answer. I want to define parameter at the level of the parent component, not each children. I also need to access the parameter from the parent component.

Collectives™ on Stack Overflow

How to define parameter for parent component in Angular 2

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related