Get back both an Observable and then later ultimately a Promise with HttpClient in an Angular 8 application.

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { environment } from '../../environments/environment';
import { Model } from '../models/model';
import { HttpClient } from '@angular/common/http';
import { Contract } from '../contracts/contract';
@Injectable()
export class Service implements Contract {
   constructor(private http: HttpClient) {}
   
   GetModelsFromServer(methodToCall: (models:Array<Model>) => void): void {
      let o:Observable<Array<Model>> = this.http.get<Array<Model>>(environment.x);
      let p:Promise<Array<Model>> = o.toPromise();
      p.then((results) => {
            console.log(results);
         methodToCall(results);
         }, (error) => {
            console.log("Trouble: " + JSON.stringify(error));
         });
   }
}

 
 

I have long heard that HttpClient was the new Http and what is above should keep you from using this anymore:

import { Http, Headers, RequestOptions } from '@angular/http';

 
 

Posts look like this instead:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { environment } from '../../environments/environment';
import { Model } from '../models/model';
import { HttpClient } from '@angular/common/http';
import { Contract } from '../contracts/contract';
import { HttpHeaders } from '@angular/common/http';
@Injectable()
export class Service implements Contract {
   constructor(private http: HttpClient) {}
   
   SaveToServer(model: Model, methodToCall: (models:Model) => void): void {
      let o:Observable<Model> = this.http.post<Model>(
            environment.x,
            model,
            {
               headers: new HttpHeaders({'Content-Type': 'application/json'})
            }
         );
      let p:Promise<Model> = o.toPromise();
      p.then((results) => {
         console.log(results);
         methodToCall(results);
         }, (error) => {
         console.log("Trouble: " + JSON.stringify(error));
         });
   }
}

 
 

Puts look like this:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { environment } from '../../environments/environment';
import { Model } from '../models/model';
import { HttpClient } from '@angular/common/http';
import { Contract } from '../contracts/contract';
import { HttpHeaders } from '@angular/common/http';
@Injectable()
export class Service implements Contract {
   constructor(private http: HttpClient) {}
   
   UpdateModel(model: Model): void {
      let o:Observable<void> = this.http.put<void>(
            environment.x,
            model,
            {
               headers: new HttpHeaders({'Content-Type': 'application/json'})
            }
         );
      let p:Promise<void> = o.toPromise();
      p.then(() => {
            console.log("Fire and forget without error!");
         }, (error) => {
            console.log("Trouble: " + JSON.stringify(error));
         });
   }
}

 
 

Delete:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { environment } from '../../environments/environment';
import { HttpClient } from '@angular/common/http';
import { Contract } from '../contracts/contract';
import { HttpHeaders } from '@angular/common/http';
@Injectable()
export class Service implements Contract {
   constructor(private http: HttpClient) {}
   
   DeleteModel(id: number): void {
      let o:Observable<void> = this.http.delete<void>(
            environment.x + "/" + id,
            {
               headers: new HttpHeaders({'Content-Type': 'application/json'})
            }
         );
      let p:Promise<void> = o.toPromise();
      p.then(() => {
            console.log("Fire and forget without error!");
         }, (error) => {
            console.log("Trouble: " + JSON.stringify(error));
         });
   }
}