Simplified Http Services with Typescript
Creating a http service that can be extended by angular services to provide crud operations
Create a generic class
Assuming you already have a Angular project with angular fire installed, create a simple generic class. Generic class will help you get IntelliSense in your IDE and allow to strongly type the methods.
export class HttpService<T> { }
Inject HttpClient and URL
We will pass the HttpClient and baseUrl from the subclass service that we will create shortly. By Adding a slash (/) at the end of url will help us appending query parameters.
export class HttpService<T> {
constructor(
private http: HttpClient,
private url: string,
) {
this.url = this.url.endsWith('/') ? this.url : this.url + '/';
}
}
Add request methods
Majority of the APIs use these four method to communicate with client applications. If you are using PATCH instead of PUT to send a update request, you can replace PUT with PATCH in this step. Everything else should be fine.
export class HttpService<T> {
constructor(
private http: HttpClient,
private url: string,
) {
this.url = this.url.endsWith('/') ? this.url : this.url + '/';
}
findAll(): Observable<T[]> {
return this.http.get<T[]>(this.url);
}
find(id: string): Observable<T> {
return this.http.get<T>(this.url + id);
}
create(t: T): Observable<T> {
return this.http.post<T>(this.url, t);
}
update(t: T): Observable<T> {
return this.http.put<T>(this.url + t['id'], t);
}
delete(id: string): Observable<any> {
return this.http.delete<any>(this.url + id);
}
}
Using HttpService
At this point, you can just create a normal angular service which extends our HttpService. To set an example I have created an Employee interface from one of my projects.
export class Employee {
id?: string;
firstName: string;
lastName: string;
dob: Date;
age: number;
gender: 'm' | 'f';
jobTitle: string;
}
@Injectable({ providedIn: 'root' })
export class EmployeeService extends HttpService<Employee> {
constructor(http: HttpClient) {
super(http, environment.serverURL + '/employees');
}
}