In this video we are going to learn about HttpClient
HttpClient helps us fetch external data, post the data.
HttpClient is a simplified client HTTP API for Angular 10 applications
Additional benefits of HttpClient include testability features, typed request and response objects, request and response interception, Observable APIs, and streamlined error handling.
Now lets see how can we use http client in angular 10.
Before using the HttpClient, we need to import the Angular HttpClientModule in app.module.ts
So lets import this
So switch to the project and here just open app.module.ts file
And this file just write here

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

Also add inside the imports array so just write here

imports: [
    BrowserModule,
    HttpClientModule
],

Now lets create a new Component
So switch to the command prompt and here just write

ng g c components/blog

now just open blog.component.ts file and inside this file
And import HttpClient First

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

Now inside the constructure just write here
constructor(private http: HttpClient) { }
Now inside he ngOnInit function just write here he

ngOnInit() {
    this.http.get("").
    subscribe((data) ⇒ console.log(data))
}

Here we will use jsonplaceplaceholder api to understanding the HttpClient
So go to google.com and just search here jsonplaceholder
now just open first link
This is a fake rest api
In this page just click on this link
You can see here the hundreds of post
Now just copy this url
And paste here

ngOnInit() {
    this.http.get("https://jsonplaceholder.typicode.com/posts").
    subscribe((data) ⇒ console.log(data))
}

Now lets add route
So just open app-routing.module.ts file
And here import the BlogComponent

Import {BlogComponent} from './components/blog/blog.component';

Now add the route here

{
    path:'blog',
    component:'blogcomponent'
}

Now go to the app.component.html file here here add link into the navar just copy this
And paste here now change the text here
Alrgiht now lets check it
Switch to the browser and just click on blog link
And open console and here you can see the blog post
Now lets display this post here
So just open blog.component.ts file
And here just create a property
posts;
Now create a function here

displaydata(data)
{
    this.posts = data;
}

Now add this function here

subscribe((data) => this.displaydata(data));

Now go to the blog.component.html file and add the following

<div *ngFor=“let post of posts ”>
    <h3>{{post.title}}</h3>
    <p>{{post.body}}</p>
</div>

Now lets check it
So switch to the browser
And here you can see the all hundered post
So in this way you can use httpclient in angular 10