TypeScript @angular/common/http HttpClient.get Examples

Programming Language: TypeScript

Namespace/Package Name: @angular/common/http

Class/Type: HttpClient

Method/Function: get

Examples at hotexamples.com: 30

The `@angular/common/http` package library provides the HttpClient service that lets you perform HTTP requests easily. It is commonly used in Angular applications for retrieving data from a server.

The `get` method of the HttpClient service is used to retrieve data from a server. It sends a GET request to the specified endpoint and returns an observable that emits the response as a JSON object.

Example 1: Performing a GET request and subscribing to the response

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

constructor(private http: HttpClient) {}

ngOnInit() {
  this.http.get('https://jsonplaceholder.typicode.com/posts/1').subscribe(
    (response) => {
      console.log(response);
    },
    (error) => {
      console.error(error);
    }
  );
}

In this example, we import the HttpClient service and inject it into the component's constructor. We then call the `get` method on the injected HttpClient service and pass the endpoint URL as an argument. We subscribe to the observable returned by the `get` method to receive the response.

Example 2: Using query parameters in a GET request

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

constructor(private http: HttpClient) {}

ngOnInit() {
  let params = new HttpParams().set('userId', '1');
  this.http.get('https://jsonplaceholder.typicode.com/posts', { params }).subscribe(
    (response) => {
      console.log(response);
    },
    (error) => {
      console.error(error);
    }
  );
}

In this example, we import the HttpParams class along with the HttpClient service. We create a new instance of HttpParams and set a query parameter 'userId' to '1'. We then pass this HttpParams instance as an option object to the `get` method along with the endpoint URL. This sends a GET request to https://jsonplaceholder.typicode.com/posts?userId=1. Overall, the `@angular/common/http` package library is used to perform HTTP requests in Angular applications using the HttpClient service. The `get` method is one of the most commonly used methods for retrieving data from a server.

TypeScript HttpClient.get - 30 examples found. These are the top rated real world TypeScript examples of @angular/common/http.HttpClient.get extracted from open source projects. You can rate examples to help us improve the quality of examples.

Frequently Used Methods

Show Hide

delete(30)

get(30)

post(30)

put(30)

request(30)

patch(12)

cache(3)

jsonp(3)

disableApiPrefix(2)

skipErrorHandler(2)

head(1)

method(1)

options(1)

Example #1

Show file

File: api.service.ts Project: av2sf/facturaya

 /*
 * EMPLEADOS
 */
 getEmployees() {
   return this.http.get(this.api + 'employees', { observe: 'response' });
 }

Example #2

Show file

File: navigation.service.ts Project: BobChao87/angular

 /**
  * Get an observable that fetches the `NavigationResponse` from the server.
  * We create an observable by calling `http.get` but then publish it to share the result
  * among multiple subscribers, without triggering new requests.
  * We use `publishLast` because once the http request is complete the request observable completes.
  * If you use `publish` here then the completed request observable will cause the subscribed observables to complete too.
  * We `connect` to the published observable to trigger the request immediately.
  * We could use `.refCount` here but then if the subscribers went from 1 -> 0 -> 1 then you would get
  * another request to the server.
  * We are not storing the subscription from connecting as we do not expect this service to be destroyed.
  */
 private fetchNavigationInfo(): Observable<NavigationResponse> {
   const navigationInfo = this.http.get<NavigationResponse>(navigationPath)
     .pipe(publishLast());
   (navigationInfo as ConnectableObservable<NavigationResponse>).connect();
   return navigationInfo;
 }

Example #3

Show file

File: scripts.service.ts Project: our-city-app/plugin-interactive-explorer

 getScript(scriptId: number) {
   return this.http.get<Script>(`${InteractiveExplorerConfig.API_URL}/scripts/${scriptId}`);
 }

Example #4

Show file

File: auth.service.ts Project: EBIBioStudies/BioStudyUISub

 checkUser(): Observable<UserInfo> {
     return this.http.get<UserInfoResponse>('/raw/auth/check?format=json').pipe(
         map(resp => AuthService.statusCheck(resp)));
 }

Example #5

Show file

File: queue.service.ts Project: Lightw3ight/PlayMeExtension

    public getMyLikes (): Observable<IPagedResult<ITrack>> {
        const url = `${this._audioZoneService.getCurrentZoneSnapshot().path}/api/likes/mylikes?start=0&take=50`;

        return this._http.get<IPagedResult<ITrack>>(url);
    }

Example #6

Show file

File: plan.service.ts Project: vatsank/NgTelecom

  getMobilePlanById(id: number): Observable<MobilePlan> {

    return this.service.get<MobilePlan>('http://localhost:3000/mobilePlans/' + id);
   }

Example #7

Show file

File: escala.service.ts Project: alexalvesdesouza/front_end_projects

 findAll(page: number, count: number) {
   return this.http.get(`${LUF_API}/escalas/${page}/${count}`);
 }

Example #8

Show file

File: requests.service.ts Project: icavanaugh95/project2

 runReportTests():Observable<any>{
   // return this.http.get("http://localhost:3000/Project2/Servlet/ProtractorTests"); // local
   return this.http.get("http://54.174.104.191:8080/Project2/Servlet/ReportTests");
 }

Example #9

Show file

File: requests.service.ts Project: icavanaugh95/project2

 runManageBatch():Observable<any>{
   return this.http.get("http://54.174.104.191:8080/Project2/Servlet/ManageBatch");
 }

Example #10

Show file

File: requests.service.ts Project: icavanaugh95/project2

 getSomething():Observable<any>{
   return this.http.get("http://54.174.104.191:8080/Project2/Servlet/getSomething");
 }

Show more examples