Ajout service et récupèration des données

trombinoscope/src/app/app.component.ts

 import {Component, OnInit} from '@angular/core';
-import {GenderEnum, PersonModel} from "../models";
+import {PersonModel} from "../models";
+import {DataService} from "./services/data.service";
 
 @Component({
   selector: 'app-root',
@@ -11,16 +12,11 @@ export class AppComponent implements OnInit {
 
   private persons: PersonModel[] = [];
 
-  ngOnInit(): void {
-    for (let i = 0; i < this.nbPerson; i++) {
-      const person = new PersonModel();
-      person.id = i;
-      person.lastname = 'Tata ' + person.id;
-      person.firstname = 'Toto';
-      person.email = 'toto.tata@test.fr';
-      person.gender = i % 2 === 0 ? GenderEnum.FEMALE : GenderEnum.MALE;
+  constructor(private dataService: DataService) {
 
-      this.persons.push(person);
   }
+
+  async ngOnInit(): Promise<any> {
+    this.persons = await this.dataService.getPersons();
   }
 }

trombinoscope/src/app/app.module.ts

 import {BrowserModule} from '@angular/platform-browser';
 import {NgModule} from '@angular/core';
+import {HttpClientModule} from '@angular/common/http';
 
 import {AppComponent} from './app.component';
 import * as Components from './components';
+import * as Services from './services';
 
 @NgModule({
   declarations: [
@@ -10,9 +12,10 @@ import * as Components from './components';
     Components.CardComponent
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    HttpClientModule
   ],
-  providers: [],
+  providers: [Services.DataService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

trombinoscope/src/app/components/card/card.component.html

 <div class="card pam mtm tbm">
-  <h2 class="txtcenter">{{person.firstname}} {{person.lastname | uppercase}}</h2>
+  <h2 class="txtcenter">{{person.firstname }} {{person.lastname | uppercase}}</h2>
   <img *ngIf="person.image; else elseBlock" class="center w100" [src]="person.image">
   <ng-template #elseBlock>
     <img class="center w100" [src]="defaultImages.get(person.gender)">

trombinoscope/src/app/services/data.service.ts

+import {Injectable} from "@angular/core";
+import {HttpClient} from "@angular/common/http";
+import {PersonModel} from "../../models";
+import {environment} from '../../environments/environment';
+
+@Injectable()
+export class DataService {
+  constructor(private http: HttpClient) {
+
+  }
+
+  public getPersons(): Promise<PersonModel[]> {
+    return new Promise<PersonModel[]>((resolve, reject) => {
+      this.http.get(environment.api.persons).subscribe(data => {
+        const results: PersonModel[] = [];
+        data['results'].forEach((result) => {
+          const person = new PersonModel();
+          person.id = result['id']['value'];
+          person.firstname = result['name']['first'];
+          person.lastname = result['name']['last'];
+          person.email = result['email'];
+          person.image = result['picture']['large'];
+
+          results.push(person);
+        });
+
+        resolve(results);
+      }, err => {
+        reject(err);
+      });
+    });
+  }
+}

trombinoscope/src/app/services/index.ts

+export * from './data.service';

trombinoscope/src/environments/environment.prod.ts

 export const environment = {
-  production: true
+  production: true,
+  api: {
+    persons: ''
+  }
 };

trombinoscope/src/environments/environment.ts

@@ -4,5 +4,8 @@
 // The list of which env maps to which file can be found in `.angular-cli.json`.
 
 export const environment = {
-  production: false
+  production: false,
+  api: {
+    persons: 'https://randomuser.me/api/?results=20&seed=seed'
+  }
 };