In my Angular project, I have 2 components working together. Component A sends an id using the following code snippet:
<a [routerLink]="['/numbersbyareacode', element.id]">
{{element.title}}
</a>
Upon navigating to Component B, it retrieves the id and stores it in a local variable called `id` as shown in the TypeScript class of Component B. When the id is printed to the console, it displays the correct value.
Here is Component B:
id: any;
constructor(private route: ActivatedRoute, private httpClient: HttpClient) {
}
ngOnInit() {
this.id = this.route.snapshot.paramMap.get('id');
console.log(this.id);
this.getAllNumbersByAreacode();
this.dataSource.paginator = this.paginator;
}
getAllNumbersByAreacode() {
// tslint:disable-next-line: max-line-length
this.httpClient.get('http://localhost:8080/p/api/v1/phonenumbers/
getN/${id}').subscribe((res: any[]) => { //this interpolation doesn't work
console.log(res);
});
}
Despite my efforts to include the id in the path, I seem to be facing an error with the URL format, which appears like this in the console:
"http://localhost:8080/p/api/v1/phonenumbers/getN/$%7Bid%7D"...
I am seeking guidance on what might be causing this issue. Any insights would be greatly appreciated.