How to pass a constant from a component to a service and make a http request

Question

Okay so what I'm trying to do is I have an *ngFor that populates with category names what I'm trying to do is get the one the user clicked on and then making an API call with it but when I click the button nothing happens. Is there a way to pass the const to my api.service or is the way I'm doing it in the component the only way to achieve this.

section: string;

sectionlink(text: any): void {
   this.section = text;
   const endpointlist = 'https://api.nytimes.com/svc/books/v3/lists/{{this.section}}?api-key=my-key-here';
   return this.http.get<Listmodel[]>(endpointlist);
   console.log(this.section);
}

<li class="uk-active"><button (click)="sectionlink(section.list_name)">{{section.list_name}}</button></li>

Hello Conor, can you edit your code please. We don't know from which file come the different parts of code that you wrote. — Wandrille, Mar 12 '19 at 15:23
Hello. "http.get" is returning a observable, so you have to subscribe it. Take a look at: https://angular.io/api/http/Http — MullisS, Mar 12 '19 at 15:24
You might want to edit out your API key in your code. This info should be private. — Antoine Delia, Mar 12 '19 at 15:32
Oh yeah sorry about that didn't realise i frogot the .subscribe been staring at this for hours trying to figure it out — Conor Donohoe, Mar 12 '19 at 15:33
See the proposed duplicate. An `Observable` returned from the `HttpClient` will not do anything until something subscribes to it. That can be done in the `.ts` code or in the html template code using the `async` pipe. — Igor, Mar 12 '19 at 15:37

skdonthi · Answer 1 · 2019-03-12T15:55:40.333

2

service.ts

getSectionlinks(text: string): Observable<Listmodel[]> {       
   const endpointlist = `https://api.nytimes.com/svc/books/v3/lists/${text}?api-key=7W3E72BGAxGLOHlX9Oe2GQSOtCtRJXAt`;
   return this.http.get<Listmodel[]>(endpointlist);
}

component.ts

sectionlink(text: string){
    this.service.getSectionlinks(text).subscribe(response =>  this.sectionData = response);
}

HTML

<li class="uk-active">
   <button (click)="sectionlink(section.list_name)">{{section.list_name}}< /button>
</li>

edited Mar 12 '19 at 15:55

answered Mar 12 '19 at 15:34

skdonthi

1,308
1
18
31

text param isn't used – Wilhelmina Lohan Mar 12 '19 at 15:42
it's edited already. please see the latest @WilliamLohan – skdonthi Mar 12 '19 at 15:43
`sectionlink` was edited but still in `getSectionlinks`, the "text" in `const endpointlist = 'https://api.nytimes.com/svc/books/v3/lists/text?api-key=7W3E72BGAxGLOHlX9Oe2GQSOtCtRJXAt';` is harcoded – Wilhelmina Lohan Mar 12 '19 at 15:48
the string should be changed to this `'https://api.nytimes.com/svc/books/v3/lists/' + text + '?api-key=7W3E72BGAxGLOHlX9Oe2GQSOtCtRJXAt'` or use a back tick along with `${text}` – rhavelka Mar 12 '19 at 15:53
@WilliamLohan, thanks for pointing it. edited!! – skdonthi Mar 12 '19 at 15:57
@rhavelka, thank you and I used es6-backticks and ${text} in the string. – skdonthi Mar 12 '19 at 15:58

Antoine Delia · Answer 2 · 2019-03-12T15:59:47.537

1

Assuming the text you send in your function is valid, you can do something like this.

sectionlink(text: string): void {
    const endpointlist = 'https://api.nytimes.com/svc/books/v3/lists/' + text + '?api-key=7W3E72BGAxGLOHlX9Oe2GQSOtCtRJXAt';
    this.http.get<Listmodel[]>(endpointlist).subscribe(result => {
        console.log(result);
    });
}

This will call your API and subscribe the result. For more info about HttpClient, please check the documentation here

edited Mar 12 '19 at 15:59

answered Mar 12 '19 at 15:31

Antoine Delia

1,728
5
26
42

2

endpointlist isn't enclosed in "`" so "{{text}}" template won't work. – Wilhelmina Lohan Mar 12 '19 at 15:41
Good point, I edited it. – Antoine Delia Mar 12 '19 at 16:00

score 0 · Accepted Answer · answered Mar 12 '19 at 15:52

Yes you can retrieve API call results right from the component, as Antoine showed. However, as your app grows, so will your component, so it's a best practice to put your API calls in a separate service like so:

import {HttpClient} from '@angular/common/http';

@Injectable({providedIn:'root'})
export class APIService {
    public static API_ENDPOINT = "https://api.nytimes.com/svc/books/v3/lists/";
    private static API_KEY = "IUOAHIUSYDFGOIAGHSFDOIHASDH"; // made up api key

    // the app will inject the HttpClient for you when this class is instantiated
    constructor(private http: HttpClient) {}

    // you can call this method whatever you like, as long as it makes sense
    public getBooks(text:string):Observable<ListModel[]> {
        return this.http.get<ListModel[]>(APIService.API_ENDPOINT + text + "?api-key=" + APIService.API_KEY);
    }
}

then in your component you can just call this method:

// angular will inject your custom service here
constructor(private apiService: APIService) {} 

public sectionlink(text:string) {
    this.apiService.getBooks(text).subscribe(response => {
        console.log(response);
        // do whatever you need to do with response here
    });
}

don't forget to provide this in your module (only if this is part of a feature module; the @injectable({providedIn:'root'}) should take care of this):

@NgModule({
  declarations: [
     YourCustomComponent
  ],
  imports: [
    HttpClientModule
  ],
  providers: [APIService],
})
export class FeatureModule { }

How to pass a constant from a component to a service and make a http request

3 Answers3

service.ts

component.ts

HTML