Angular HTTP calls using Angular Service
Tags: angular, typescript, genericservice, httpcalls
Published: 2023-06-11 18:59:41

## Introduction:
Angular is a popular Typescript framework by Google used for building web applications. One of the key features of Angular is its ability to make HTTP calls to retrieve data from a server or send data to a server. In this article, we will explore how to perform HTTP calls using an Angular service in a generic way. We will cover the basic concepts, demonstrate the implementation steps, and provide some practical examples.

**Table of Contents:**

[1. What is Angular Service?](#chapter-1)
[2. Setting up a Angular Http Client](#chapter-2)
[3. Making basic Http request](#chapter-3)
[4. Typed Http request](#chapter-4)
[5. Creating an Angular Service](#chapter-5)
[6. Why service and why to make generic?](#chapter-6)
[7. Http call using service](#chapter-7)
[8. Making it **_Generic_**](#chapter-8)

## 1. What is Angular Service? <a name="chapter-1"></a>
Before we dive into HTTP calls, it's important to understand the role of an Angular service. Services in Angular are used to encapsulate and share functionality across components. They provide a way to centralize common logic, such as making HTTP requests, so that it can be easily reused throughout an application.

## 2. Setting Up the Angular HTTP Client <a name="chapter-2"></a>
To begin making HTTP calls, we need to set up the Angular HTTP client. We'll discuss how to import and configure the HTTP client module in your Angular project.

In app.module.ts

```typescript
import { NgModule } from '@angular/core';

import { HttpClientModule } from '@angular/common/http';// <-- import HttpClientModule
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,         // <-- add it in import section
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

```


## 3. Making basic Http request <a name="chapter-3"></a>
After the setup done in app.module.ts file we can jump onto the component
```typescript
// app.component.ts
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-http',
  templateUrl: './http.component.html',
  styleUrls: ['./http.component.scss'],
})
export class HttpComponent implements OnInit {
  constructor(private http: HttpClient) {
  // Basic http GET request
    this.http.get('url to get data').subscribe(
      (res) => {
        console.log(res);
      },
      (err) => {
        console.log(err);
      }
    );
  }

  ngOnInit(): void {}
}
```
Inside the constructor HttpClient has to be injected to make http calls using `http` variable that we used to inject.
`http` provide basic http calls like GET, POST, PUT, DELETE, PATCH. These are the basic http calls we need.

```typescript
// GET request
this.http.get('url').subscribe();
// POST request
this.http.post('url', { dataToSend }).subscribe();
// PUT request
this.http.put('url', { dataToSend }).subscribe();
// DELETE request
this.http.delete('url', { dataToSend }).subscribe();
// PATCH request
this.http.delete('url').subscribe();
```
`subscribe()` you can see that there is a subscribe function is called on every http calls. subscribe function tells browser to make request to the `url` with data that you've given. To make it simple creating connection using `http` and opening/ calling the request using `subscribe()`.
It is required to use subscribe function so that we can get _response_ and _error_ back from the server.

```typescript
this.http.get('url').subscribe(
  (res) => {
    console.log(res);
  },
  (err) => {
    console.log(err);
  }
);
```
Inside this subscribe it gives two outputs either **_resultObject_** when the request is success or **_errorObject_** when request is failure. Using those object we can handle things further.


## 4. Typed Http request <a name="chapter-4"></a>
Now comes the magic 🪄 of the typescript. We can even get the result as we expected by annotate the request with type.

```typescript
// creating type for Post
interface Post {
  userId: number;
  title: string;
  body: string;
}

this.http.get<Post[]>('url').subscribe(
  (res) => {
    console.log(res); // <-- this res will be in the type of Post array
  },
  (err) => {
    console.log(err);
  }
);
```

Since the above get request in annotated with `<Post[]>`(<typeOfResult>) the subscribe function result in the type of `Post[]` so the result will in the type of array of Post object and every object will contain userId, title and body.

This goes to all http request.


## 5. Creating an Angular Service <a name="chapter-5"></a>

We can generate a service in angular by,

```
ng generate service {your-service-name}
```

## 6. Why service and why to make generic? <a name="chapter-6"></a>

Service is basically used to reduce the repetition of the code in angular. It can easily injected in any component and can directly access the functions variables inside the service.

Now coming to the main point Why http calls have to be in service and why it has to be a generic service.

1. `http` calls are repeated in many places.
2. Since every object commonly have all GET, PUT, POST, DELETE requests, making it a generic service and inheriting it make our work easier, simpler and cleaner.

## 7. Http call using service <a name="chapter-7"></a>

Using [generate](#chapter-5) command create a service.

```typescript
// post.service.ts
import { Injectable, EventEmitter } from '@angular/core';
@Injectable({
  providedIn: 'root',
})
export class PostService {

  getPost(id: number): Observable<Post> {
    return this.client.get<Post>(`{apiUrl}/posts/${id}`);
  }

  getPosts(): Observable<Post[]> {
    return this.client.get<Post[]>(`{apiUrl}/posts`);
  }

  putPost(id: number, data: Post): Observable<Post> {
    return this.client.put<Post>(`{apiUrl}/posts/${id}`, data);
  }

  postPost(data: Post): Observable<Post> {
    return this.client.post<Doctor>(`{apiUrl}/posts`, data);
  }

  deletePost(id: number): Observable<Post> {
    return this.client.delete(`{apiUrl}/posts/${id}`);
  }

}
```

`@Injectable` tells angular that it is injectable class (i.e) to create a new object of the class.
The class `PostService` can be injected in any component and the functions like getPost, getPosts, putPost, postPost, deletePost can be used.
<a name="service"></a>
```typescript
// app.component.ts
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { PostService } from './service/post.service.ts'; // <-- import service

@Component({
  selector: 'app-http',
  templateUrl: './http.component.html',
  styleUrls: ['./http.component.scss'],
})
export class HttpComponent implements OnInit {
  constructor(private post: PostService) { // <-- inject the service
  // Basic http GET request
    this.post.getPosts().subscribe( // <-- use it where ever needed
      (res) => {
        console.log(res);
      },
      (err) => {
        console.log(err);
      }
    );
  }

  ngOnInit(): void {}
}
```

By injecting the service in the component we can access its methods. Since it returns an `Observable` we need to subscribe it for further computations.

But, the problem is we need to create the same thing for the other objects like Post.

Let's say we need to create a service for Comment. What we need to do is create another service and define everything that we did in post.service.ts. So what we can do is making an abstract Generic service and by inheritance we can easily achieve what we need in easiest way


## 8. Making it **_Generic_** <a name="chapter-8"></a>

```typescript
// generic.service.ts

function createOptions(options: any) {
  if (!options) return '';
  let string = '?';
  Object.keys(options).forEach((key, id, s) => {
    if (s.length == id) string += `${key}=${options[key]}`;
    else string += `${key}=${options[key]}&`;
  });
  return string;
}

export abstract class GenericService<T> {
  private baseUrl = environment.apiUrl;
  constructor(private httpClient: HttpClient, protected apiUrl: string) {}

  public create(resource: Partial<T>): Observable<T> {
    return this.httpClient.post<T>(`${this.baseUrl}${this.apiUrl}`, resource);
  }

  public get(options?: any): Observable<T[]> {
    return this.httpClient.get<T[]>(
      `${this.baseUrl}${this.apiUrl}${createOptions(options)}`
    );
  }

  public getAll(options?: any): Observable<T> {
    return this.httpClient.get<T>(
      `${this.baseUrl}${this.apiUrl}${createOptions(options)}`
    );
  }
  public getById(id: number): Observable<T> {
    return this.httpClient.get<T>(`${this.baseUrl}${this.apiUrl}/${id}`);
  }

  public update(resource: Partial<T>, id: number): Observable<T> {
    return this.httpClient.put<T>(
      `${this.baseUrl}${this.apiUrl}/${id}`,
      resource
    );
  }

  public delete(id: number): Observable<void> {
    return this.httpClient.delete<void>(`${this.baseUrl}${this.apiUrl}/${id}`);
  }
}

```

By extending this Generic service in every other class we can achieve all the api calls.

```typescript
// api.service.ts
@Injectable({ providedIn: 'root' })
export class PostService extends GenericService<Post> {
  constructor(private http: HttpClient) {
    super(http, `/posts`);
  }
}

@Injectable({ providedIn: 'root' })
export class CommentService extends GenericService<Comment> {
  constructor(private http: HttpClient) {
    super(http, `/comments`);
  }
}
```
This PostService and CommentService will provide [same](#service) functions provided by old service.

By extending this Generic Service we can create as many service we need.

Happy Coding 💻 :).