Generics – Implementation in Java Spring Boot and Angular (part-2)

In this tutorial, we will see how Generic can be used in Angular.
Imagine, we have couple of modules in a angular project. For example, BookMark,Search,Profile are some module name. Different modules serve different functionality. Each module has their own model and service for API calls. All the APIs usually have basic CRUD functionalities like find,save,update,delete. All these module will have almost similar service.
In this case, we can make a generic service and can reuse for different module’s service.

Lets implement a generic service
Create a interface for common curd operations:

import { Observable } from 'rxjs/Observable';
export interface CrudOperations<T, ID> {
  save(t: T): Observable<T>;
  update(id: ID, t: T): Observable<T>;
  findOne(id: ID): Observable<T>;
  findAll(): Observable<T[]>;
  delete(id: ID): Observable<any>;
}

Now, lets implement this interface as a abstract class(which instance can’t be created) which will be used in different module services by extending the abstract class.

import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { CrudOperations } from './crud-operations.interface';

export abstract class CrudService<T, ID> implements CrudOperations<T, ID> {

  constructor(
    protected _http: HttpClient,
    protected _base: string
  ) {}

  save(t: T): Observable<T> {
    return this._http.post<T>(this._base, t);
  }

  update(id: ID, t: T): Observable<T> {
    return this._http.put<T>(this._base + "/" + id, t, {});
  }

  findOne(id: ID): Observable<T> {
    return this._http.get<T>(this._base + "/" + id);
  }

  findAll(): Observable<T[]> {
    return this._http.get<T[]>(this._base)
  }

  delete(id: ID): Observable<T> {
    return this._http.delete<T>(this._base + '/' + id);
  }

}


Now, Lets use the generic service into one of our module
Our data model of that module is like below

export class Bookmark {
  public id: number;
  public url: string;
  public description: string;
}

Now, our module service will extend the generic service that was created before

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Bookmark } from './bookmark.model';
import { CrudService } from './crud.service';

@Injectable()
export class BookmarkService extends CrudService<Bookmark, number> {

  protected BASE_API: string = 'http://localhost:8080/api/bookmarks'

  constructor(protected _http: HttpClient) {
    super(_http, this.BASE_API);
  }

}

So, in this way we can use Generic concept in Angular.

In the next part, we will see the uses of generics in JAVA Spring boot application.

Ref:
https://jasonwhite.xyz/posts/2019/11/16/angular-8-creating-a-generic-crud-service/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s