CRUD Operation With Fake HTTP Service In Angular

We’ve already learned a lot of fundamental concepts in Angular. Here, we’ll see the concept of consuming HTTP Services. So, by the end of this article,

We’ll be able to connect our Angular application to our backend services or APIs.
And specifically, we’ll learn how to perform CRUD operations.
We’ll learn how to extract a reusable data service for working with various endpoints.
How to properly handle different kinds of errors.
How to build applications with proper separation of concerns.

If you’re a beginner and you want to start your journey with Angular, here is the roadmap for you.

JSONPlaceHolder

We already know that Angular is a front-end framework, we use it to build client applications. In most of the real-world applications, we need a bunch of HTTP Services on the server and we use these services to get and save data. Now, as an Angular or front-end developer, we don’t necessarily need to know how to build HTTP services unless we want to be a full stack developer. So here, we’ll learn about fake HTTP services which we use at the back-end for our application.

Here is the link for fake online REST API for developers. If we scroll down the home screen, we’ll see various endpoints.

CRUD Operation with Fake Http Service In Angular

If we click on an anchor tag, we’ll navigate to the page where we’ll see the JSON object containing the data of posts or comments or albums or photos and so on.

When we hit this above image URL in our Angular app, we’ll get this huge amount of data. We can send various kinds of HTTP requests to create, update, and delete posts as well. But as I told you, this is a fake service, when we create a new post, the API responds as if the post was actually created on the server but if we refresh the page, we’ll not see the newly created post there; because there is no database behind this HTTP service. In this article, we’ll learn to use this service as the back-end of our application.

Getting Data

Now, we know what a JSONPlaceHolder is. Let us take a look at how to write code to get all these post objects from JSONPlaceHolder and display them on a page. So here, we’ve created a new component called Posts component.

PS C:\Users\Ami Jan\HelloWorld\MyFirstAngularProject> ng g c Posts

Now, to enable an HTTP Service in the module, we define it in app.module.ts

imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
HttpModule
]

And in the header, use this import statement for HttpModule.

import { HttpModule } from "@angular/http";

Now, let's come back to the component and here, we’ll define the constructor. And in this constructor, we’ll add the parameter HTTP of Http. Whenever we want to get the data or save the data, we use this Http class to send an HTTP request to the backend. Now, let’s send the Get request to the server, which returns an Observable of response. And we know that we use Promises and Observables for asynchronous and non-blocking operations. Here, the request goes over the network, calls the server, but the data is not available immediately. So, there is some delay. During this delay, we don’t want the main thread to be executed because this code would get blocked.

We’ve already discussed what Promise is. Now, let me tell you what an Observable is, with an example.

What is Observable?

Assume, you’re working with an application containing a source code in which a few lines are written for the server interaction (request, response). Now, when you run the application, your script executes line by line and when it comes to the server interaction of line of code, the execution is paused because now, the request is interacting with the server and waiting for the response. Until we get the response back, next lines of code will never execute. And the response might depend on the internet connection and many other factors. Let’s suppose the response comes back after 3 seconds. Only after these three seconds, the further code is executed. Well, this is an issue. We have to wait until the response comes back.

So in Angular, when we’re using HTTP request, the HTTP service sets the Observable object during the interaction of the request with the server. So, Observable is responsible for server interaction. It sends the request to the server and receives the response as well. In simple words, Observable observes the response on the server. So when we’re using Observable, during execution, we make Observable object responsible for handling the response and we subscribe that Observable object in some point in our code. In this way, our script remains in execution state and doesn’t wait for a response. And then, when the response comes back, the Observable object handles that response and implements that response in all the places where we subscribed it. So this is why we subscribe to the Observable.

When the HTTP Requests execute, they interact with the server. Angular sets the response in Observable and then if we want to use that response in our component, we need to subscribe it.

So now, let’s implement this Observable concept in our application. Let us go back to the Posts component.

export class PostsComponent {
constructor(http: Http) {
http.get('https://jsonplaceholder.typicode.com/posts')
.subscribe()
}
}

We’ve 2 overloaded functions of subscribe and we’ll implement the 2^nd one.

So here, we can pass an arrow function.

export class PostsComponent {
constructor(http: Http) {
http.get('https://jsonplaceholder.typicode.com/posts')
.subscribe(response => {
console.log(response);
});
}
}

This is what we call a subscription function. And here, we can access the response. Now, use the Posts HTML Selector in app.component.html. Let’s run the application with ng serve and look into browser console.

Most of the times, we don’t need to use this response object in the raw form. We want to convert it into JSON object because we use JSON objects to display the data in our Views.

constructor(http: Http) {
http.get('https://jsonplaceholder.typicode.com/posts')
.subscribe(response => {
console.log(response.json());
});
}

Now, we’ll get a long array of posts.

Instead of showing the data on the console, let’s save the data to a container and use it in the template.

export class PostsComponent {
posts: any[];
constructor(http: Http) {
http.get('https://jsonplaceholder.typicode.com/posts')
.subscribe(response => {
this.posts = response.json();
});
}
}

Now, let’s go to posts.component.html

<ul class="list-group">
<li
*ngFor="let post of posts"
class="list-group-item">
{{ post.title }}
</li>
</ul>

Here is the result in the browser.

So, this is how we consume the service in our application.

Creating Data

Now, let’s add the functionality to add a new post. We already know that we use HTTP Post request to create the new resource. Now, let’s make an input textbox for entering the text and when you hit Enter, it posts your service. So, come in the posts.component.html.

<input
(keyup.enter)="createPost()"
type="text" class="form-control">
<ul class="list-group">
<li
*ngFor="let post of posts"
class="list-group-item">
{{ post.title }}
</li>
</ul>

So here is the HTML. Now, we’re calling just the function here on keyup.enter. But, how do we get the text of the textbox to enter into the service? So, let’s add the template variable here.

<input
#title
(keyup.enter)="createPost(title)"
type="text" class="form-control">

Now, come again into the component and define the function.

createPost(title: HTMLInputElement) {
}

As you can see, to avoid any confusion, we define the type annotation as HTMLInputElement instead of string or any object. And the title is really actually the reference of HTML element. Now here, we need to call the server once again. So, we’ll use an HTTP object again in this function.

But the issue is that the HTTP object is just available to constructor only. So we make this HTTP variable as the class property here.

export class PostsComponent {
posts: any[];
constructor(private http: Http) {
http.get('https://jsonplaceholder.typicode.com/posts')
.subscribe(response => {
this.posts = response.json();
});
}
createPost(title: HTMLInputElement) {
}
}

Let me tell you the purpose of requests with specific operations.

Http Request

GET - Get Data (Read)
POST - Create Data (Create)
PUT - Update Data (Update)
DELETE - Delete Data (Delete)

Here is also another Http Verb (Patch) -- we’ll look into it later on.

export class PostsComponent {
posts: any[];
// it is private because we don't want to access it outside of the class.
// It is just for this class
private url = 'https://jsonplaceholder.typicode.com/posts';
constructor(private http: Http) {
http.get(this.url)
.subscribe(response => {
this.posts = response.json();
});
}
createPost(input: HTMLInputElement) {
this.http.post(this.url,);
}
}

In the post method, the 2^nd argument is the body which we input into a JSON object. When calling the HTTP services for creating data, the body of the request should be a JSON object that’s the object we want to send to the server. So here, we need to create the post object containing title as the body of post request.

createPost(input: HTMLInputElement) {
let post = { title: input.value };
this.http.post(this.url, );
}

So we’ve set only 1 property here because this is a simple application. In most complex applications, we need to set multiple properties or multiple input fields. But for setting multiple input fields in the JSON object, we need to create the HTML form in the template to get the value from it. Now as the second argument of post method, we need to convert this post JSON object to a string. So we use JSON.stringify(). JSON is the native object in JavaScript.

createPost(input: HTMLInputElement) {
let post = { title: input.value };
this.http.post(this.url, JSON.stringify(post));
}

Now, this post method also has the returntype of Observable<Response>.

So all the methods in the HTTP class return Observable which means here, we need to subscribe to this Observable and we’ll get the response in the subscription function. And now, let’s print the response on the console.

createPost(input: HTMLInputElement) {
let post = { title: input.value };
this.http.post(this.url, JSON.stringify(post))
.subscribe(response => {
console.log(response.json());
});
}

Let’s test this in the browser. Enter the name in the input field and hit Enter; check what you have in the console.

So this is the object which we get from the server in response. And this object has only 1 property called id of the new post. In the real world application, when we send HTTP post request to the server the server should respond with the complete representation of the newly created object. So as we're working with fake service. This is purely for demonstration purpose, not a real API.

Now back in the component, the id we get from the server adds into the post object. So,

createPost(input: HTMLInputElement) {
let post = { title: input.value };
this.http.post(this.url, JSON.stringify(post))
.subscribe(response => {
post.id = response.json().id;
console.log(response.json());
});
}

We’ve the compilation error on post.id because post object which we have created in the first line of the function doesn’t have id property. There are 2 workarounds here.

One way is,

createPost(input: HTMLInputElement) {
let post: any = { title: input.value };
this.http.post(this.url, JSON.stringify(post))
.subscribe(response => {
post.id = response.json().id;
console.log(response.json());
});
}

Use any type with post object.

The second way is,

createPost(input: HTMLInputElement) {
let post = { title: input.value };
this.http.post(this.url, JSON.stringify(post))
.subscribe(response => {
post['id'] = response.json().id;
console.log(response.json());
});
}

Use square bracket notation.

So, we can use any approach. So now, we have the post. Finally, we need to add it to our post array. So it can make it visible in the browser.

createPost(input: HTMLInputElement) {
let post = { title: input.value };
this.http.post(this.url, JSON.stringify(post))
.subscribe(response => {
post['id'] = response.json().id;
this.posts.splice(0, 0, post);
console.log(response.json());
});
}

Here, the splice method adds an item at the first place in the array. The first argument is the starting position number, the 2^nd argument is the deleteCount to delete the elements from start and the 3^rd argument is the object which we want to add into the array. And if we want to add this object into the end of the array, we’ll use push() method.

this.posts.push(post);

But here, we’ll use splice() method.

Now, let’s test the application in the browser.

Look it is adding our text into the array. But our textbox should be clear. So

createPost(input: HTMLInputElement) {
let post = { title: input.value };
input.value = '';
this.http.post(this.url, JSON.stringify(post))
.subscribe(response => {
post['id'] = response.json().id;
this.posts.splice(0, 0, post);
console.log(response.json());
});
}

And now, it is working perfectly.

It takes time to add the things because we’re using a fake service on the back-end. So, don’t confuse.

Updating Data

Now, let’s see how to implement the ability to update data. So, back in our template, let’s add a button inside list li so that if someone presses this button, we’ll update this record.

<ul class="list-group">
<li
*ngFor="let post of posts"
class="list-group-item">
<button
(click)="updatePost(post)"
class="btn btn-default btn-sm">Update</button>
{{ post.title }}
</li>
</ul>

Now back in our component, let’s define the updatePost() method.

updatePost(post) {
this.http.patch()
}

So here we’ve 2 options (PUT or PATCH). We use Patch method to update only a few properties in an object. So instead of sending a complete representation of that object to the server, we send only the properties that should be modified. So here we’re using a patch. We use PUT when we need to modify the complete object. It is easier to show you in code. So here let’s say each post has a property called isRead, when we click a post we wanna set that property to true to indicate that this post has been read.

updatePost(post) {
// We are sending only the properties that should be modified, instead of
// sending complete object.
this.http.patch(this.url, JSON.stringify({ isRead: true }));
}

So this is how we use patch method. And if you want to use the put method.

updatePost(post) {
this.http.put(this.url, JSON.stringify(post));
}

Now you might be thinking which approach should you use, and that is really dependent upon what you’re building. First of all, you need to make sure that is your API really supports both the PUT and PATCH. Most people build APIs that respond to PUT request, so PATCH is not widely supported. But if you have an API that supports both the Patch and Put method, then if you’re modifying few properties then it would be better to use Patch method because with the help of Patch we don’t need to send the entire object to the server. And it leads to a slight performance benefit.

And here we use the patch method and just like other HTTP methods, here we use subscribe() method as well.

updatePost(post) {
this.http.patch(this.url, JSON.stringify({ isRead: true }))
.subscribe(response => {
console.log(response.json());
});
}

Now, let’s see the results in the browser. Look when I click on the Update button, we got Patch 404 error.

Because when we use Patch or Put method, we need to reference it to a specific post. And if you see the URL here (https://jsonplaceholder.typicode.com/posts), there is not any specific record to update. We’re referencing the entire posts collection. But we need to reference a specific post. So,

updatePost(post) {
this.http.patch(this.url + '/' + post.id, JSON.stringify({ isRead: true }))
.subscribe(response => {
console.log(response.json());
});
}

And if we now press the Update button, now it is working fine without any error. Now as we’re using patch method, we’re just updating the part of the object not the complete object. So, here is our request header tab in Network.

Deleting Data

So we’ve implemented GET, POST, PUT/PATCH. Now let’s implement the delete functionality. So first of all add the delete button in a template.

<ul class="list-group">
<li
*ngFor="let post of posts"
class="list-group-item">
<button
(click)="updatePost(post)"
class="btn btn-default btn-sm">Update</button>
{{ post.title }}
<button
(click)="deletePost(post)"
class="btn btn-danger btn-sm pull-right">Delete</button>
</li>
</ul>

Now let’s define the deletePost() method in the component.

deletePost(post) {
this.http.delete(this.url + '/' + post.id)
.subscribe(response => {
let index = this.posts.indexOf(post);
this.posts.splice(index, 1);
});
}

Now let’s test the application in the browser. And yes it is working fine, records are deleting. Where we click the Delete button on any list item, it removes from the list.

So this is how we use fake http service to define the CRUD operations.

OnInit Interface

Now let’s take a look on the issue with this implementation. So here in the constructor of Posts component, we’re calling the get() method of an http request to get the posts from the server. As the best practice, the constructor should be very small and lightweight. So we should not perform the expensive operations like calling the server. Then you might ask, when and where can we get the posts from the server. Well, components in Angular have what we call lifecycle hooks. So there are special methods that we can add to our component and Angular will automatically call these components at a specific time during the lifecycle of the component.

For example,

We create the component
Render it in some template where we want
Create and render its children
Destroy a component.

These are examples of lifecycle events. At this point, Angular will call specific methods in our component if they are defined. One of this method is ngInit(). So when we create the component with Angular CLI all the components implements OnInit interface. Now we come to the angular website and search for OnInit interface.

So it is defined in @angular/core and here we can see the shape of OnInit interface. It has ngOnInit() method with void returntype. So OnInit is an interface that refer to lifecycle hook. There are multiple lifecycle hooks in Angular i.e.

OnInit
OnChanges
DoCheck
AfterContentInit and so on…

Each of these interfaces declare the same name method prefix with ng. So for OnInit we have ngOnInit. So let’s implement OnInit interface in the class.

export class PostsComponent implements OnInit {
}

Add the import statement for OnInit interface as well.

import { Component, OnInit } from '@angular/core';

It is not necessary to explicitly implement the interface OnInit on the class, because when we use ngOnInit() in the class it will automatically work. But for compile time checking, we explicitly mention implements OnInit with class.

export class PostsComponent implements OnInit {
posts: any[];
private url = 'https://jsonplaceholder.typicode.com/posts';
constructor(private http: Http) {
http.get(this.url)
.subscribe(response => {
this.posts = response.json();
});
}
ngOnInit() {
}
}

And now move all the constructor code in ngOnInit()

export class PostsComponent implements OnInit {
posts: any[];
private url = 'https://jsonplaceholder.typicode.com/posts';
constructor(private http: Http) {
}
ngOnInit() {
this.http.get(this.url)
.subscribe(response => {
this.posts = response.json();
});
}
}

Now you might think, we are using this.http in ngOnInit() but it is not the class member here. So let me repeat once again, if we create the parameter of constructor with access modifier it means that it is the member of the class. So it is working inside ngOnInit().

So here is the lesson, don’t call http services in the constructor of your component. If you need initialization use ngOnInit()

Separation of Concern

So it is the complete implementation of our Posts component.

export class PostsComponent implements OnInit {
posts: any[];
private url = 'https://jsonplaceholder.typicode.com/posts';
constructor(private http: Http) {
}
ngOnInit() {
this.http.get(this.url)
.subscribe(response => {
this.posts = response.json();
});
}
createPost(input: HTMLInputElement) {
let post = { title: input.value };
input.value = '';
this.http.post(this.url, JSON.stringify(post))
.subscribe(response => {
post['id'] = response.json().id;
this.posts.splice(0, 0, post);
console.log(response.json());
});
}
updatePost(post) {
this.http.patch(this.url + '/' + post.id, JSON.stringify({ isRead: true }))
.subscribe(response => {
console.log(response.json());
});
}
deletePost(post) {
this.http.delete(this.url + '/' + post.id)
.subscribe(response => {
let index = this.posts.indexOf(post);
this.posts.splice(index, 1);
});
}
}

Now here is the little problem with this implementation. The problem is this implementation violates the principal of Separation of Concerns. So the issue is our classes should be responsible for only one thing. A class should have a single responsibility. A class that does too many things violates the principle of SoC. Such kind of classes are hard to maintain and hard to test.

Now in this implementation, our post's component is involved in too different concerns. One is the presentation logic behind this view i.e. what should happen when click the update or delete button.

And the other concern in this classes involve is getting the data. And here we need to know this endpoint.

private url = 'https://jsonplaceholder.typicode.com/posts';

We need to work with http class. In Update and Delete method, we need to construct the url. This is a different concern. In the larger and more complex applications, it is likely that we’re going to work with posts of different pages. So this is not the only page where we display the posts. So in those pages as well we need to know the url and the post endpoint. So if in the future, the url changes for any reason we have to update at multiple places in our code. And also from a testing point of view, this implementation is little bit harder to test. For example, we have to write the automated test for this method.

updatePost(post) {
this.http.patch(this.url + '/' + post.id, JSON.stringify({ isRead: true }))
.subscribe(response => {
console.log(response.json());
});
}

In our unit test, we don’t have the live server up and running. So we want to isolate this component and only focus on the logic implemented here. In other words, we don’t want to make http calls to the server because it has too many problems. The first problem is if the server is not up and running, our test will fail. And the second problem is, always http calls slow down the automated test. So we run hundreds and thousands of automated tests in just a few seconds. So we should not ever ever ever call the http requests in the automated test.

So what is the solution?

The solution is to make another class ‘Service’. And this class will purely be responsible for working with our backend. So if we want to get all the posts or create the posts, or update or delete the posts we’re going to delegate this responsibility to that class or service. And it will solve the 2 issues that we discussed earlier. First of all the details of working with this backend is encapsulated in 1 place and we can reuse this at multiple places. And also if in the future, this detail changes like url, we need to update it only 1 place in our code.

The second benefit is, when we want to unit test our component. We can create Fake implementation of that service that doesn’t make http calls to the server. And then we can easily run thousands of unit test in just one go.

Extracting the Service

Now we’ll see how to extract the service from the component. Now first of all create the new service using Angular CLI.

PS C:\Users\Ami Jan\HelloWorld\MyFirstAngularProject> ng g s post

And it will create the two files.

src/app/post.service.spec.ts (for unit testing)
src/app/post.service.ts (service file)

As you can see Angular CLI adds this service in app folder. In real world applications, we’ve tens and hundreds of services. We should avoid putting all the services in app folder. So create the folder ‘services’ and put all the services there.

PS C:\Users\Ami Jan\HelloWorld\MyFirstAngularProject> cd src/app
PS C:\Users\Ami Jan\HelloWorld\MyFirstAngularProject\src\app> mkdir services
PS C:\Users\Ami Jan\HelloWorld\MyFirstAngularProject\src\app> mv post.service.* services

This is how we make the services directory inside app folder and move all the post services to services folder.

Now register this service in providers (app.module.ts)

providers: [
PostService
]

And auto import automatically adds the reference of this PostService in app.module.ts.

Now let’s go to our posts component, the first thing I wanto to move to the service is url. This is the implementation details working with our backend

export class PostService {
private url = 'https://jsonplaceholder.typicode.com/posts';
constructor() { }
}

Now here in the constructor, we need to inject Http class. So,

export class PostService {
private url = 'https://jsonplaceholder.typicode.com/posts';
constructor(private http: Http) { }
}

Now let’s go back to post.component.ts and replace http parameter of constructor with our service. So in our component we should not inject http class, this is a different concern. Instead we should work with our services. So, let’s change this to our services.

export class PostsComponent implements OnInit {
posts: any[];
constructor(private service:PostService) {
}
}

And remove the import statement of Http from post component. Now let’s modify ngOnInit() and move the http call to the service. So here is PostService

export class PostService {
private url = 'https://jsonplaceholder.typicode.com/posts';
constructor(private http: Http) { }
getPosts() {
return this.http.get(this.url);
}
}

And here is the posts.component implementation

export class PostsComponent implements OnInit {
posts: any[];
constructor(private service:PostService) {
}
ngOnInit() {
this.service.getPosts()
.subscribe(response => {
this.posts = response.json();
});
}
}

Now look this statement,

this.service.getPosts()

means that we want the posts here. We call the function and now it is the responsibility of this service function to get the data for us. We don’t know how this function works and get the posts, we just want to get the posts. And it is totally up to the service to figure out where to get these posts. Today it is getting the posts from JsonPlaceHolder; tomorrow it might get the data from FireBase or it might get the data from the local storage. So all these are the responsibilities of the services we’ve created. So when we change how to get the posts, our component will not be affected. All these changes are encapsulated at one place inside the service. And if we’ve 10 other components in our application that are using the service, those components will not be affected by these changes. So this is why we have Separation of Concerns.

So here is our final component code.

import { PostService } from './../services/post.service';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-posts',
templateUrl: './posts.component.html',
styleUrls: ['./posts.component.css']
})
export class PostsComponent implements OnInit {
posts: any[];
constructor(private service:PostService) {
}
ngOnInit() {
this.service.getPosts()
.subscribe(response => {
this.posts = response.json();
});
}
createPost(input: HTMLInputElement) {
let post = { title: input.value };
input.value = '';
this.service.createPost(post)
.subscribe(response => {
post['id'] = response.json().id;
this.posts.splice(0, 0, post);
console.log(response.json());
});
}
updatePost(post) {
this.service.updatePost(post)
.subscribe(response => {
console.log(response.json());
});
}
deletePost(post) {
this.service.deletePost(post.id)
.subscribe(response => {
let index = this.posts.indexOf(post);
this.posts.splice(index, 1);
});
}
}

And here is our service part,

import { Http } from '@angular/http';
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class PostService {
private url = 'https://jsonplaceholder.typicode.com/posts';
constructor(private http: Http) { }
getPosts() {
return this.http.get(this.url);
}
createPost(post) {
return this.http.post(this.url, JSON.stringify(post))
}
updatePost(post){
return this.http.patch(this.url + '/' + post.id, JSON.stringify({ isRead: true }))
}
deletePost(id) {
return this.http.delete(this.url + '/' + id);
}
}

Now let’s test the application in the browser. And we’ll see it is working beautifully.

5 Comments

Join the conversation! Your thoughts help the community grow.

Mithilesh Kumar8y ago
Really all are great articles ..........
Manav Pandya8y ago
I think you might be using older version of angular, because now Http is deprecated and we should use HttpClient in services, update it to latest if possible, Thanks
- Usama Shahid8y ago
  I'll consider on your request :). Http is not fully depreciated, right now I'm creating and working on Angular 6 project but you're right I should move to HttpClient as well :) Thanks :)
Sarathlal Saseendran8y ago
All your articles are very nice sir.
- Usama Shahid8y ago
  Thanks to appreciate my work :)