Topics
Published on July 9, 2018 by kudvenkat

In this video we will discuss how to call a server side service using Angular HttpClient service. We will specifically discuss, issuing a GET request to retrieve data from the server.

Text version of the video
csharp-video-tutorials.blogspot.com/2018/07/angular-httpclient-get-example.html

Slides
csharp-video-tutorials.blogspot.com/2018/07/angular-httpclient-get-example-slides.html

Angular CRUD Tutorial

Angular CRUD Tutorial Text Articles & Slides
csharp-video-tutorials.blogspot.com/2017/12/angular-crud-tutorial.html

All Dot Net and SQL Server Tutorials in English
www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd

All Dot Net and SQL Server Tutorials in Arabic
www.youtube.com/c/KudvenkatArabic/playlists

Step 1 : Import Angular HttpClientModule : Before we can use HttpClient service, we need to import Angular HttpClientModule. In most angular applications we do this in the root module AppModule (app.module.ts)

import { HttpClientModule } from ‘@angular/common/http’;

Include the HttpClientModule in the imports array of @NgModule() decorator of AppModule class

Step 2 : Import and inject HttpClient service : We want to use HttpClient service in our EmployeeService (employee.service.ts)

Import HttpClient service
import { HttpClient } from ‘@angular/common/http’;

Inject the service using the service class constructor.

@Injectable()
export class EmployeeService {
constructor(private httpClient: HttpClient) {
}

getEmployees(): Observable[Employee[]] {
return this.httpClient.get[Employee[]](‘http://localhost:3000/employees’);
}
}

Please Note :
1. We are using the HttpClient service get() method to issue a GET HTTP request.

2. In addition to get() method, we also have post(), put(), patch(), and delete() methods to perform the respective HTTP operations.

3. To the get() method we pass the URI of the server side service we want to call.

4. Also notice we are using the get[T]() method, generic parameter to specify the type of data we are expecting. In our case, we are expecting an Employee[] array back.

5. If we were using the old Http service, we would have to use .json() method on the response to get JSON data back. With the new HttpClient service, we no longer have to do that. JSON is now the default response.

Step 3 : Subscribe to the angular observable service : To be able to use getEmployees() method of EmployeeService, we need to subscribe to it as it returns an Observable. If we do not subscribe, the service method will not be called.

However, there is an exception to this. If the observable service is being consumed by a Resolver, the resolver service will subscribe to the Observable, we do not have to explicitly subscribe. The resolver will automatically subscribe to the observable service. On the other hand, if the getEmployees() method of the EmployeeService is consumed by a Component or another service, then that component or service must explicitly subscribe to the Observable, otherwise it will not be called.

Make sure the JSON server is running. If it is not running the list route does not display anything. Use the following command to start the JSON server

json-server –watch db.json

At the moment, we are not handling errors. What happens if the request fails on the server, or if a poor network connection prevents the request from even reaching the server. In this case, HttpClient service returns an error object instead of a successful response. We will discuss error handling in our next video.

Leave a Reply

4 Comments on "Angular httpclient get example"

Notify of
avatar

deepak dagar
Guest
deepak dagar
4 days 18 hours ago

Please show us a demo.of lazy loading in angular.

Israil Karud
Guest
Israil Karud
5 days 21 hours ago

Sir ur voice is so sweet…….you are awesome….no words to explain….god bless u with lots of happiness

madan Chakravarthy
Guest
madan Chakravarthy
6 days 19 hours ago

its Nice Venkat Garu..

Mahesh Sainoju
Guest
Mahesh Sainoju
7 days 11 hours ago

Hi can u please make a video of angular interceptors

wpDiscuz