Route parameter values ​​in a component in Angular

The parameter values ​​that we define in routes can be retrieved in the component class. Let's see how this can be done. Let's say we have the following route with parameters:

app/app.routes.tsconst routes: Routes = [
  { path: 'aaaa/:id', component: AaaaComponent },
  { path: 'bbbb', component: BbbbComponent },
];

Let's get the value of this parameter in the component class. Here it is worth paying attention to the fact that the values ​​of the route parameters can only be obtained in the component that is bound to the route. In our case, the Aaaa component is bound to the route. Therefore, we will work with it further.

So, to get the route parameter values, you need to use the ActivatedRoute service. Let's import it into our component:

app/aaaa/aaaa.component.tsimport { ActivatedRoute} from "@angular/router";

Let's implement the service into the constructor:

app/aaaa/aaaa.component.tsexport class AaaaComponent {
  constructor(private activateRoute: ActivatedRoute) {
    
  }
}

We will receive an object with parameters:

app/aaaa/aaaa.component.tsexport class AaaaComponent {
  constructor(private activateRoute: ActivatedRoute) {
    let params = activateRoute.snapshot.params;
    console.log(params);
  }
}

Let's get the value of our parameter:

app/aaaa/aaaa.component.tsexport class AaaaComponent {
  constructor(private activateRoute: ActivatedRoute) {
    let params = activateRoute.snapshot.params;
    let id = params['id'];
    console.log(id);
  }
}