Working with AJAX In Angular

 AJAX[Asynchronous Javascript And XML]

-------------------------------------
Ajax provides asynchronous communication with server[or webserver] to send|get
 required data
Asynchornous communication allows performing more than one task parallely
Eg:
   username availability
   cascading dropdown
       ...
Advantages:
  1.asynchronous communication[parallel exec]
  2.user state will be maintained by avoiding page reload|refresh
    [better user experience]
  3.reduces network traffic and burden on server
 
There are different ways to work with ajax
 1.manual approach using javascript[xmlhttprequest component]
 2.jquery ajax[$.ajax function]
 3.angular ajax[httpclient service]

Http Client service:
-------------------
*Angular2 was providing Http  service to work with ajax
*Angular5+ is providing Http Client service to work with ajax, Http service is  deprecated

*Http Client service is simple, light weight and more powerful over Http service
     simple-->easy to user[developer friendly]
     light weight-->consumes less memory resources
     powerful   -->it supports Http Interceptor middleware service

*Http Client service can be used to perform an ajax call to rest api methods
 to perform crud operations with datastore
*Http Client  service is providing set of methods to call rest api methods
 1.get(restapiurl)--it will call rest api get method to get all the recs (or) rec based on a condition

 2.post(restapiurl,object)--it will call rest api post method to insert a rec
 
 3.put(restapiurl,object)--it will call rest api put method to update | modify a rec

 4.delete(restapiurl)--it will call rest api delete method to delete a rec


HttpClient service methods will return Observable, register callback function
 using subscribe method to read restapi method response

 syntax:
   this._httpclient.<methodname>(restapiurl,..).subscribe(
            (posresponse)=>{
                            callback function to read positive response[data]
                            provided by restapi method
                           },
            (errorresponse)=>{
                            callback function to read error response
                            provided by restapi method
                             },
                   ()=>{
                        complete callback func
                       }
                );


There are so many third party restapi's are available on internet

https://www.w3schools.com/angular/customers.php
https://reqres.in/api/users
https://jsonplaceholder.typicode.com/todos
https://restcountries.eu/rest/v2/all
    |
   name
ngmusicdb.herokuapp.com/api/getMusic

http://dummy.restapiexample.com/api/v1/employees
https://api.covid19api.com/summary
https://api.exchangeratesapi.io/latest


For this example, i am going to use the below url 


http://dummy.restapiexample.com/api/v1/employees









Goto 

https://jsonviewer.stack.hu/
























create a component to display employees data getting from restapi available
on internet server


ng g c employees --flat


Employee.ts

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './employees.component.html',
  styleUrls: ['./employees.component.css']
})
export class EmployeesComponent {
  res:any;
  constructor(private _httpclient:HttpClient) 
  { 
    this._httpclient.get("http://dummy.restapiexample.com/api/v1/employees").subscribe(
     (response:any)=>{
       this.res=response;
     }
    );
  }
}

.html

<h1> Employee Data</h1>
<table style="font-size:x-large" border="1">
    <tr>
        <th>name</th>
        <th>salary</th>
        <th>age</th>
    </tr>
    <tr *ngFor="let e of res.data">
      <td>
          {{e.employee_name}}
      </td>
      <td>
       {{e.employee_salary}}
   </td>
   <td>
       {{e.employee_age}}
   </td>
    </tr>
   </table>


AppModule.ts

import{HttpClientModule} from "@angular/common/http";
@NgModule({
    ...
 imports:[...,HttpClientModule],
 bootstrap:[EmployeesComponent]
   })
   ...



Output


























In case  , if you are getting CORS Error, then use chrome browser and go to the installed path
and type the below command

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

Second Approach to fix that issue ,is to fix CORS Error


https://www.stackhawk.com/blog/angular-cors-guide-examples-and-how-to-enable-it/

note:
-----
*HttpClient service is provided with @angular/common/http package,this
 requires HttpClientModule
*exec flow:

  browser                  AngularLiveDevelopment server
        ------------------->angularapp[port-4200]
        <-------------------
 angular app
  exec
[employees
 component exec]--------------------------------------webserver
                     internet                        restapi method
                <-------------------------------------{..}------------------>database
                    employees data
     |
reading response with
in callback func
     |
presentation