Angular HttpClient Get with Body and Example

 

Angular Httpclient is usually used to retrieve the data from the API's or the endpoints, Simply we can say like whenever we request the data then we use the get method to get the data from the server.

What is Angular HttpClient?

• Angular HttpClient is used to the HTTP request and HTTP response by using the HttpClient service.
• This service is available in the @angular/common/http package.
• To perform the operation we need to import the module at the app module level. 

How to use Angular HttpClient to call the API?

• To make a  call then we need an endpoint. below is the HTTP method to call the API.

•   get(api-endpoint)

• we can pass different parameters as options and it's not mandatory to the GET call.

•   get('url',options:{headers:{object},params:{objects}})

• But the important thing is the response. the response type always ba an observable

NOTE:

1. Where ever the response is observable then we need to subscribe to it.
2. the advantage of subscribing is to read in proper order.

How to work with Angular HttpClient GET?

Below are the steps to work on the HttpClient Get method with Example

1. Import Angular HttpClientModule in our App Module.
2. Import Angular HttpClient in Service.
3. Inject the Angular HttpClient in the Constructor method of typescript class.
4. Implement the Get method call-in service.
5. import the service in the Component class.
6. Finally, call the method to make the HTTP request.

Angular HttpClient Get with Body

 1.Import HttpClientModule in our App Module.

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

    

    @NgModule({

      declarations: [

         ],

      imports: [

        HttpClientModule

      ],

      providers: 

      bootstrap: [AppComponent]

    })

    export class AppModule { }

2.Import Angular HttpClient and Inject in the constructor and get method implementation

    import { Injectable } from '@angular/core';

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

    @Injectable({

      providedIn: 'root'

    })

    export class PropertyService {

      constructor(private _http: HttpClient ) { }

      readonly baseURI: string = 'www.testservice.com/employee';

      getAllProperties(): Observable<propertyModel[]> {

            let url_ = this.baseURI;

          return this._http.get<propertyModel[]>(url_);

      }

    }

3.Import the service in the Component class and subscribe to the service and call the get method

    

   import { Component, OnInit } from '@angular/core';

    import { ActivatedRoute } from '@angular/router';

    import { propertyModel } from '../models/propertyModel';

    import { PropertyService } from '../shared/property.service';

    @Component({

      selector: 'app-property-list',

      templateUrl: './property-list.component.html',

      styleUrls: ['./property-list.component.css']

    })

    export class PropertyListComponent implements OnInit {

      constructor(private service: PropertyService) { }

      properties: Array<propertyModel> ;

      ngOnInit() {

        this.service.getAllProperties().subscribe(

          res => {

            this.properties = res;

           // console.log(this.actRoute.snapshot.url.toString());

            // tslint:disable-next-line:no-debugger

          },

          err => {

            console.log(err);

          },

        );

      }

    }

Conclusion

Angular HttpClient Get with Body means we need to create a service and subscribe to the service in any Component. every component has an HTML template there we can display the data in UI. Next, I am going to publish the article on Angular HttpClient Post, Put and Delete.