Angular httpclient get example
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
http://csharp-video-tutorials.blogspo...
Healthy diet is very important for both body and mind. We want to inspire you to cook and eat healthy. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking.
/ @aarvikitchen5572
Slides
http://csharp-video-tutorials.blogspo...
Angular CRUD Tutorial
• Angular CRUD tutorial
Angular CRUD Tutorial Text Articles & Slides
http://csharp-video-tutorials.blogspo...
All Dot Net and SQL Server Tutorials in English
https://www.youtube.com/user/kudvenka...
All Dot Net and SQL Server Tutorials in Arabic
/ kudvenkatarabic
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.
On this page of the site you can watch the video online Angular httpclient get example with a duration of hours minute second in good quality, which was uploaded by the user kudvenkat 09 July 2018, share the link with friends and acquaintances, this video has already been watched 64,447 times on youtube and it was liked by 273 viewers. Enjoy your viewing!
