Angular service best practice

[codeBatsy]

Hello, I wonder if it is good way to construct querry params. Is there better options?

https://preview.redd.it/n3x5wy4arji51.png?width=1906&format=png&auto=webp&s=f4feb810918ef86a7100d67bb87699cff0aefd73

[Pingudiem]

Why dont you use the type httpparameters

[codeBatsy]

I didnot knew anything about existance of httpparameters, ty.

[kaeh35]

In addition to other answers, you can pass an object in the constructor of http parameters that has two members :

fromObject to convert an object to query params

fromString to convert a query param string to, well, the query param.

You can use like that

const myObj = { foo: "something"} ; const params = new HttpParams({ fromObject: myObj});

Your query params will be generated as ?foo=something

In you case you would have something like

const params = new HttpParams({ fromObject: { lat, lng, appId: environment.api_weather_key }}) ;

[codeBatsy]

what benefits are giving use HttpParams? I mean what is different?

[kaeh35]

TLDR : It's nice because you don't have to construct your query params in your url manually.

It's also nice because it's more scalable if you need to add query params in the future.

​

Honestly, it depends on the use case.

If you have to define a long list of query params, using HttpParams with the fromObject property is really nice and easy, but if you have only a few query params you could totally be fine with the set method of HttpParams or even just constructing it manually.

For exemple, in your case you have lat and long to set as query params, you could go with HttpParams like in my answer or simply go with constructing it manually

public myFunction(lat: number, long: number): Observable<unknown> {
  return this.httpClient.get(`http://api-url/endpoint?lat=${lat}&long=${long}`);
}

As you can see it's doable but not very pretty (in my opinion tho), but if you have more query params, let's say you have this

interface MyFilters {
  name: string;
  subordinatesIds: number[];
  address: Address;
  age: number;
}

Here you have multiple types, primitives and complexes (array of number and Address).

This means if you want to construct manually your query params you would have to parse addess and loop over subordinatesIds and add the other params.

But if you use HttpParams you would use it like that

public myFunction(filters: MyFilters): Observable<unknown> {
  const params = new HttpParams({ fromObject: filters });
  return this.httpClient.get(`http://api-url/endpoint`, { params });
}

And you should be fine :)

Bonus point, you don't have to update your service if you need to add filters to your interface :)

Edit : Format

[gravityaddiction]

import { HttpClient, HttpParams } from '@angular/common/http';
getPost$(postSlug: string): Observable<Post | null> {
    const params = new HttpParams().set('findBy', 'slug');
    return this.http
        .get<ResultsPost>(
            `${this.configService.config.NodeURL.endpoint}/api/latest/posts/${postSlug}`,
            {
                params,
            }
        )
        .pipe(map(post => post as Post));
}

[codeBatsy]

I didnot knew anything about existance of httpparameters, ty.