The simplest requests (GET and POST)

01-simple-request.service.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';

// Injectable indicates a dependency injectable service
// providedIn indicates the level at which components can access it
@Injectable({
  providedIn: 'root'
})
export class SimpleRequestService {

  // We use HttpCLient to perform the requests
  constructor(private httpClient: HttpClient) { }

  // Simple GET request
  simpleGET(): Observable<any> {
    const URL = 'YOUR_URL_HERE';
    return this.httpClient.get(URL);  // returns an Observable
  }
  
  // Simple POST request
  simplePOST(): Observable<any> {
    const URL = 'YOUR_URL_HERE';
    const data = null;
    return this.httpClient.post<any>(URL, data);  // returns an Observable
  }
}

02-simple-page.component.ts

import { Component, OnInit } from '@angular/core';
import { UtilityService } from 'src/app/services/utility.service';

@Component({
  selector: 'app-simple-page',
  templateUrl: './simple-page.component.html',
  styleUrls: ['./simple-page.component.css']
})
export class SimplePageComponent implements OnInit {

  // Injecting the request service
  constructor(private simpleRequestService: SimpleRequestService) { }

  ngOnInit() {
    // Subscribing to simple GET (Similar for POST
    this.simpleRequestService.simpleGET().subscribe(
      getResp => {
        console.log('data from simple GET', getResp);
      }, getError => {
        console.log('error from simple GET', getError);
      }, () => {
        console.log('GET complete');
    });
  }
}