CODEWITHSUNDEEP
springangularrestmodel-view-controllerjhipster
Antifa
Antifa

Reputation: 387

Jhipster - Angular HTTP Get request never executed

I use JHipster Framework on a Web Project. I'm new to it so I have some questions. I try to implement an API call from a button to the back-end. I want the button Resolve when it's clicked to call a method and this method goes to the service to make the actual API call. Now there is the problem. When i access the resolveFile method in my Service i get all the alerts but not the API call. When I try to access directly the backend making the call from Postman it works well. The problem seems to be in the myFile.service.ts file. Do you have any suggestions?

myFile.component.html:

<button (click)="resolveFile(myfile.id)" class="btn-dark btn btn-sm">
    <span class="fa fa-beer"></span>
    <span class="d-none d-md-inline" >Resolve</span>
</button>

myFile.component.ts:

resolveFile(id) {
    alert('mpika1');
    this.myfileService.resolveFile(id);
}

myFile.service.ts

private resourceUrl = SERVER_API_URL + 'api/my-file/resolve';
resolveFile(id: String): Observable<EntityResponseType> {
    debugger;
    alert();
    this.http.get(`${this.resourceUrl}/${id}`);
    alert();
    return null;
}

myFileResource.java

@GetMapping("/my-file/resolve/{id}")
public ResponseEntity<MyFileDTO> resolveFile(@PathVariable String id)
{
    log.debug("REST request to resolve myFile: {}", id);

    // TODO
    myService.resolveFile(id);
    return null;
}

Upvotes: 0

Views: 396

Answers (2)

John Velasquez
John Velasquez

Reputation: 3451

You have to subscribe it.

this.http.get(`${this.resourceUrl}/${id}`).subscribe((res) =>{
  //res -> response output
});

Angular uses library called rxjs, for more info https://angular.io/guide/rx-library

For better implementation, better return the Observable rather than returning null

myFile.service.ts

private resourceUrl = SERVER_API_URL + 'api/my-file/resolve';
resolveFile(id: String): Observable<EntityResponseType> {
    return this.http.get(`${this.resourceUrl}/${id}`);
}

myFile.component.ts

resolveFile(id) {
   //In here you could wait the response
    this.myfileService.resolveFile(id).subscribe((res) =>{
      //res -> response output
      alert('mpika1');
    });;
}

Upvotes: 1

Med Chedly HAJJAR
Med Chedly HAJJAR

Reputation: 13

When using observable in angular , and in order to get them to be executed to have to subscribe to it. 

 resolveFile(id) {
    alert('mpika1');
    this.myfileService.resolveFile(id).subscribe(reslt => {
 // to see the result 
console.log(rslt) 
});
}

Upvotes: 1

Related Questions