Angular 7 - Get Param Value from the url - angular7

Question

I already went through link: How to get param from url in angular 4? and trying to follow the same approach.
I am using Angular 7 and my current URL: http://localhost:4200/student-details/488
When I clicked on different Side Pane link, I want to get the value 488 and pass that value to other component.
I used below in ngOnit() where my page is routing to.
this.route.paramMap.subscribe(params => {
console.log('params', params);
});

Answer 1

Assuming your routing module has something similar to below -
{
path: 'student-details/:id',
component: StudentDetailsComponent,
}
You can get the 488 (:id) property from student-details/488 like -
this.route.paramMap.subscribe(params => {
let id = params.get('id');
// let id = +params.get('id'); //<--- if you want to convert it into a numeric value
console.log('Student Id', id);
});

Answer 2

I am using angular 8
Component from where I am routing
this.router.navigate(['/ledger-card'], { queryParams: { branchId: '10', loanAcc: '2738'}});
Component where I am receiving the routed data
const param = this.route.snapshot.queryParamMap;
if (param.get('branchId')) {
const branchId = param.get('branchId');
const loanAcc = param.get('loanAcc');
}
** Make sure you import ActivatedRoute
import { ActivatedRoute } from '#angular/router';
constructor(private route: ActivatedRoute) {}

Answer 3

Routing Module:
...
{
path: '',
component: YourListComponent
},
{ //
path: ':id', // <--
component: YourSingleComponent // <--
} //
...
yoursingle.component.ts
...
import { ActivatedRoute } from '#angular/router';
...
export class YourSingleComponent implements OnInit {
...
singleID: number;
...
constructor(
private _route: ActivatedRoute,
) {
}
ngOnInit() {
this.singleID = parseInt(this._route.snapshot.paramMap.get("id"));
}
...
}