In this article, we will be creating a web service in our angular application. I will explain step by step tutorials from scratch.

Import HttpClientModule after BrowserModule into your app module. The HttpClient in @angular/common/http offers a simplified client HTTP API for Angular applications that rests on the XMLHttpRequest interface exposed by browsers.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from "@angular/common/http";

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Create a new service using angular-cli generators.

ng generate service ./services/crud

Inside of crud service, we need to use the HttpClient, so we request it using dependency injection. Also, the service will contain all necessary methods.

constructor(private http: HttpClient) { }

Declare a general property for base API URL.

import { Injectable } from '@angular/core';
import {HttpClient} from "@angular/common/http";

@Injectable({
providedIn: 'root'
})
export class CrudService {
//base api url
public url = 'http://localhost/web_api/';
constructor(private http: HttpClient) { }
}

Get Products

Create a method for getting all products. Here we will use HTTP GET method to retrieve data from the webserver.

getProducts(){
return this.http.get(this.url + 'view.php');
}

This method will raise a request to view.php file and gets the response in JSON format.

Get Product Details

Create a method for getting single product. Here we will use HTTP GET method to retrieve data from the webserver.

getProductDetails(id){
return this.http.get(this.url + 'view_one.php?id=' + id);
}

This method will raise a request to view_one.php file and gets the response in JSON format.

Create Product

Declare a method for creating a new product. Here we will use the HTTP POST method.

createProduct(data){
return this.http.post(this.url + 'create.php', data);
}

Here our application raises a request to the web server and sends the data in post method. If the record created successfully in the database, we would receive a success message else gets a failure message.

Update Product

Create a method for updating product details. Here our application raises a request to the web server and sends the data in post method. If the record updated successfully in the database, we would receive a success message else gets a failure message.

updateProduct(data){
return this.http.post(this.url + 'update.php', data);
}

Create a method for delete product. Here our application raises a request to the web server and sends the product id in HTTP GET method. If the record deleted successfully in the database, we would receive a success message else gets a failure message.

deleteProduct(id){
return this.http.get(this.url + 'delete.php?id=' + id);
}

Finally, we have created our web service successfully.