Using Angular HTTP Client in MEAN Stack

In our previous section, we fetched the initial post using the node server backend. This section will connect our node server to the angular app and fetch the post from there. Using angular http client is not so easy. We will fetch the post from angular by using the angular http client in the following way:

1) Go to the getPosts() function of the post.service.ts file. In this function, we need to reach out to our backend, fetch the posts, store them in posts and then fire our update listener to inform anyone interested in our app.

So, in the getPosts() method, we need to send an http request and sending http requests is very easy with angular because it has a built-in http client. Now, to use the angular http client, we need to unlock it by simply importing it in the app.module.ts file in the following way:

import{HttpClientModule} from '@angular/common/http';
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule,
    FormsModule,
],

Now, we can use that http client in our components or services.

2) We could use it directly in our post-list.component.ts file, but we want to centralize this task in our service. It is not directly related to the template or UI of that specific component, and we may want to use it in other parts of the app too. So, centralizing such http calls in service makes a lot of sense.

We need to inject the angular http client into the service. It is important to know that we cannot inject the components only but also things into service also by using the constructor in the following way:

import {HttpClient} from '@angular/common/http';
constructor(private http: HttpClient ){

}

In the above code, the constructor takes a private variable of type HttpClient as an argument.

3) Now, we can use it in our getPosts() function. We will remove the return statement from here and use the local http property, which has a couple of methods. We will use the get method, and pass the targeting path to it in the following way:

getPosts(){
    this.http.get('http://localhost:3000/api/posts');
}

4) Now, it would not do anything because the http client uses observables. It especially uses an observable which won't do anything and won't even send the request, which it wraps if we don't listen to it because we are not interested in the response, then why it would send the request?

So, we need to listen to it, and for this, we need to use subscribe() method. We will pass three arguments there, i.e., the first one is for new data, the second one is for errors and the third one when it completes.

We are interested in new data, which will be the response, and we probably also want to add error handling. We pass a function as an argument that is executed whenever we get a response. In this function, we got back to the body of the response already because the angular http client gave access to this body immediately.

  getPosts(){
    this.http.get('http://localhost:3000/api/posts')
    .subscribe(()=>{
      
    });
  }

5) The get method is a generic method, and we have to clearly specify the type of value which we will get back. The body of the response will be the object which has a message property and the posts property. So, we will define the type of the value in the following way:

  getPosts(){
    this.http.get<{message: string, posts: Post[] }>('http://localhost:3000/api/posts')
    .subscribe(()=>{

    });
  }

We need to add one important property here, i.e., ID, but we need to change the definition of the posts in the model for this. On the backend, our posts also have an ID, so we also need to add an ID to our front-end model in the following way:

export interface Post{
  id: string;
  title: string;
  content: string;
}

These changes will create an error in our post.service.ts file. We need to define the id when we create a new post in the following way:

We set the id to null because we have no ID as it was not generated on the server yet.

6) In the subscribe function, we will pass the PostData in the subscribe() function as an argument. We will get the typescript support and IDE support and using it we will get our posts data and store them into our posts variable in the following way:

  getPosts(){
    this.http.get<{message: string, posts: Post[] }>('http://localhost:3000/api/posts')
    .subscribe((PostData)=>{
        this.posts = PostData.posts
    });
  }

7) Now, we need to inform our app and other parts of our app about this update, so we will call the postUpdated's next and in this function, we will pass the copy of the post in the following way:

8) We will see an error in our post-list.component.ts file. Now, our getPosts() function doesn't return anything, but in the post-list component, we expected to get back posts. We weren't getting back posts, and we simply just triggered that http request whenever the post-list component is loaded in the following way: