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:

const 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:

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

Let's implement the service into the constructor:

export class AaaaComponent {
	constructor(private activateRoute: ActivatedRoute) {
		
	}
}

We will receive an object with parameters:

export class AaaaComponent {
	constructor(private activateRoute: ActivatedRoute) {
		let params = activateRoute.snapshot.params;
		console.log(params);
	}
}

Let's get the value of our parameter:

export class AaaaComponent {
	constructor(private activateRoute: ActivatedRoute) {
		let params = activateRoute.snapshot.params;
		let id = params['id'];
		console.log(id);
	}
}

Get the values of your parameters.

Route parameter values ​​in a component in Angular

Route parameter values in a component in Angular