How to call API in angular & with an example of PHP API

How to call API in angular & with an example of PHP API.

Software required:-

• Node -> https://nodejs.org/en/download/

• VS Code -> https://code.visualstudio.com/download

• Angular CLI -> npm install -g @angular/cli

To understand how to call API in angular follow the below steps:-

Step:1 Project Setup

1. Create a project in angular -> ng new project name
2. Install npm -> npm i

3. Import HttpClientModule in app.module.ts -> import { HttpClientModule } from '@angular/common/http';

4. Add provider providers: [WebserviceService],

example -> ng new crudInAngularPHP

Step:2 API Service

1. Create a service with name webservice -> ng g s services/webservice
2. import modules import { HttpClient, HttpHeaders, HttpRequest, HttpEvent } from '@angular/common/http';
3 .    Call constructor constructor(private http: HttpClient)

4. Add a common function to get a response of API with name postRequest:-
    

  

     postRequest(url: string, data: any): any {

    let headers = new HttpHeaders({

'Content-Type': 'application/json',

'Accept': 'application/json',

})

let payload = data;

let endPoint =“api base url” + url;

return this.http.post(endPoint, payload, { headers });

    }

Step:3 Components and API Calling

1. Create a component with name home -> ng g c home
2. Design .HTML file
3. Call web service in .ts file
        1. Import import { WebserviceService } from '../services/web.service';

        2. Call consturctor constructor( private webapi: WebserviceService ) { }

4. Create a function to get Channel data :-

    getRecord() {

let requestData:any={}

this.webapi.postRequest("API URL", requestData).

subscribe(

data => {

// write logic on data

},

error => {

}

);

}

PHP API CODE EXAMPLE:-

<?php

    header("Access-Control-Allow-Origin: http://localhost:4545"); 

    header("Content-Type: application/json; charset=UTF-8");  

  

    header("Access-Control-Allow-Methods: POST, DELETE, OPTIONS");  

  

    header("Access-Control-Max-Age: 3600");  

 

    header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");  

    $response['name'] = "Mukund Programming Tutorials";

    $response['Courses'] = [array("name"=>"Angular","name"=>"JavaScript")];

    $response['status'] = true;

    $json_response = json_encode($response);

    echo $json_response;

 

 ?>