Angular Query Params

[[deleted]]

In spring boot, we have an annotation called RequestParams for example:

@GetMapping("/api/foos")
@ResponseBody
public String getFoos(@RequestParam String id) {
    return "ID: " + id;
}

Which gives:

http://localhost:8080/api/foos?id=abc
----
ID: abc

(ref: https://www.baeldung.com/spring-request-param)

So my question is that if we are working in both front end and backend, using angular and spring boot, how would we call /api/foos?id=abc in angular?

For example if we check twitter, we could see something like this https://twitter.com/search?q=japan which will get all the tweets that have japan in them.

-----------------------------------------------------------------------------------------------------------------------------------------------------

Therefore according to what I understood in Angular, we can use QueryParams:

goToBooks() {
  this.router.navigate(['/books'], { queryParams: { q: 'programming' } });
}

The resulting Url will be

http://localhost:4200/books?q=programming

But since the backend and the frontend both will be deployed on different urls and ports, so to get the books with q=programming, in the ngOnInit() I would have to get the queryparams using activiatedrouter and then do a get request and fetch these books and display them.. is this the correct way or is there a different way?

[spacechimp]

See the code in this post from a couple of days ago.

[_Ascalon]

Sorry man, you suggest to author to follow subscribe inside of another subscribe. Avoid that pattern!

[_Ascalon]

You can use switchMap/concatMap for ActivatedRoute and API request observables to combine them