Web API not being called from angular

I’m trying to call custom API in angular but for some reason it doesn’t call it. Before this I made 10 functions in angular (in _api.service.ts) that call web API in the same way and they are correct, my web API is called and data is returned, everything is good. Then I made one more method in web API and one more component in angular (function getList() is called in it), and it didn’t work, API is never called.

getList(id: string, chosen: string): Observable<StopListModel[]> {
        let myUrl: string = API_URL + '/stop/list';
        myUrl += '/' + id;
        myUrl += '/' + chosen;
        //debugger goes to this line, url is correct but API not called
        return this.http.get<StopListModel[]>(myUrl, this.httpUtils.getHTTPHeader());
   }

When I was debugging I saw that url for API is correctly sent from angular, like in 10 other functions that successfully call API in my project, so I think I don’t need to send you code from my web API. I was confused so I moved line that is calling the getList() from new component to existing component, where I already know my _api.service will successfully call web API because in that component there is a function (for example getUsers() ) that correctly calls API. And it didn’t work, API is not called for getList().

I assumed there is something wrong with web API for getList(), but just to be sure in that second component I called another _api.service function (that works when called from another component), and surprisingly – API was not called for that function either.

Then I saw what I think the problem is: when I try to call any function in any of my components, all this “new” functions never call API, just the old ones that have already been there, even though they correctly work in their own components.

export class DetaljiStopoviComponent{
            stops$: Observable<StopStatisticsModel[]>;
            list$: Observable<StopListModel[]>
            constructor(
              private apiService: APIService,
              route: ActivatedRoute
            ) {
                var id = route.snapshot.params['id'];
                this.stops$ = this.apiService.getStopStatistics(id); //this works, it was there before - but any other calling I add under this, API is not called (this is the case for every component, every function)
                this.list$ = this.apiService.getList(id, '3'); //this is the newest one, I can't make it call API even in the empty components      
            }
}

I am so confused and not experienced in angular, I’m very courious what the problem is. I don’t think something is wrong with web API, but I’m not sure. Does anyone have suggestion?

Answer

Looks like you are forgot to subscribe to:

this.stops$ = this.apiService.getStopStatistics(id);
this.list$ = this.apiService.getList(id, '3');   

I think this.stops$ works for you because somewhere in the template you have async pipe(stops$ | async).

So try to do:

this.list$.subscribe(response => console.log(response));

after that request should sent