CRUD Operations

  • Perform CRUD Operations (Create, Read, Update, Delete)
  • Extract a reusable data service
  • Property handle different kinds of errors
  • Build applications with proper separations of concerns

We need the HttpClientModule, in order to send or receive http requests.

We will do it into the app.module.ts, because that’s where all the imports are.

import { HttpClientModule } from '@angular/common/http';

And then add this HttpClientModule in the list of imports:

imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule
 ],

Now, we can send http requests from our application.

To receive data from the backend, let’s create a service. Into the users.service.ts, import HttpClient and Observable.

import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

So, we will send requests to the backend API using this HttpClient, and we will receive the incoming data using an observable.

Now, let’s create an instance of HttpClient in the constructor.

constructor(private http: HttpClient) { }

Let’s also define the base URL for the backend API. If you check the server folder, you will see a file called index.js. And here, we have this base endpoint /api.

private baseURL = `http://localhost:3000/api`
app.use('/api', routes)
Was this page helpful?
Yes No