[2020] Ionic - Fetch Json Remote Server Data In 5 Steps

if you followed the first tutorial on how to create a service, this steps is a followup by fetching JSON data from a remote server.

Step 1:

open app.module.ts

ADD: import { httpClientModule } from '@angluar/common/http';

ADD in imports:[httpClientModule]

Step 2:

Create a new file called employee.ts and ADD the following code:

export interface IEmployee{
    id: number,
    name: string,
    age: number

}

Step 3:

employee.service.ts

ADD THESE IMPORTS:
import { HttpClient } from '@angular/common/http';
import { IEmployee} from './employee';

ADD String variable for the remote server which contains the json data
private url: string = "https://randomuser.me/api/?results=5"

ADD IN Constructor
constructor(private http:HttpClient ){}

create a method inside the export class EmployeeService

getEmployees(): Observable<IEmployee[]>{
    return this.http.get<IEmployee[]>(this.url);
}

Step 4:

employee-list.component.ts

ngOnInit(){
    this._employeeService.getEmployees()
    .subscribe(data => this.employees = data);
}

Step 5:

Open employee.component.html

<pre>{{employees |json}}</pre>

This youtube show how to perform these steps in more details. I've tried both methods and they worked for me as of May 2020

Video: BEST METHOD AND SHORTER

Video: GOOD METHOD BUT LONGER