Wednesday, July 8, 2020
therichposts@gmail.com
Angular 8Angular 9Angular7

How to send calls in Angular 9 to an API?

What is the best way to send calls in Angular to an API?
Views

Hello to all, welcome to therichpost.com. In this post, I will tell you, How to send calls in Angular 9 to an API?

Post Working:

In this post, I will show you multiple API Calls using Angular 9 HTTP POST and HTTP GET services.

Here are all the API calls and please learn and use them carefully:

1. Simple API call using Angular 9 HTTP GET and you can use into your app.component.ts file or any service file:

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

data = []; //Declare variable to store API data

constructor(private http: HttpClient) {
      
    //Basic Get API call
    this.http.get('http://localhost/mypage.php').subscribe(data => {
  
    //Pushing API data to declare variable
    this.data.push(data);
    
    }, error => console.error(error));
}

 

2. API Call using Angular 9 HTTP Post service. You can send data with this service like Form Post Data and you can add this code into your app.component.ts file or any service file:

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


constructor(private http: HttpClient) {}

...

// Looks like Form Submit Function
onSubmit() {
     
    // creates an empty FormData object
       var myFormData = new FormData();

    // Begin assigning parameters
       myFormData.append('name', this.registerForm.value.name);
       myFormData.append('email', this.registerForm.value.email);
       myFormData.append('phone', this.registerForm.value.phone);

      // POST API With DATA
      return this.http.post('http://localhost/mypage.php/'
  , myFormData).subscribe((res: Response) => {
    //Getting API Response	
  });

}
...

 

3. Multiple API Calls in one time using Angular 9 POST GET forkJoin  and you can add this code into your app.component.ts file or any service file:

forkJoin seems merging API requests(array merging)

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


...
data = []; // Declare array variable
constructor(private http: HttpClient) {}
...

...

//Something like Form Submission

FormSubmit()
{
        //creates an empty FormData object
          var myFormData = new FormData();
          myFormData.append('id', id);

        //Call Multiple API Using forkJoin
          forkJoin(this.http.post('http://localhost/mypage.php', myFormData), 
             this.http.get('http://localhost/mypage.php'))
            .subscribe(([call1Response, call2Response]) => {
     
            //Pushing API data to array variable
            this.data.push(call2Response);
       });

}
...

 

If you have any kind of query regarding Angular 9 API calls then you can comment below.

Jassa

Thank you

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, Angular 8, Angular 9, Angular 10 Nodejs, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

2 Comments

  • Hi,

    This is a very nice post, but can you have not mentioned the file name before every code. it makes us confuse where we need to write the code . Please mentioned the file name (like component/service.ts) so that help to understand this

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.