Petites améliorations UI/UX.

src/app/network-call/network-call.component.html

@@ -6,15 +6,21 @@
                 [disabled]="isLoading$ | async">
             Load the car
         </button>
+
+        <button mat-raised-button
+                (click)="loadCarViaAnObservable()"
+                [disabled]="isLoading$ | async">
+            Load the car
+        </button>
     </div>
     <div class="loading" *ngIf="isLoading$ | async">
         <h2>Loading...</h2>
         <mat-spinner></mat-spinner>
     </div>
-    <ng-container *ngIf="isLoaded">
+    <div class="section" *ngIf="isLoaded">
         <h2>Car data</h2>
         <div class="centered">
             <app-car [value]="car"></app-car>
         </div>
-    </ng-container>
+    </div>
 </div>

src/app/network-call/network-call.component.scss

@@ -1,4 +1,9 @@
 .component {
+  .actions {
+    display: flex;
+    gap: 1rem;
+  }
+
   .loading {
     display: flex;
     flex-direction: column;

src/app/network-call/network-call.component.ts

@@ -28,7 +28,10 @@ export class NetworkCallComponent {
 
     loadCar(): void {
         this.loadThroughAPromise();
-        // this.loadThroughAnObservable();
+    }
+
+    loadCarViaAnObservable(): void {
+        this.loadThroughAnObservable();
     }
 
     private loadThroughAPromise(): void {

src/app/promises-example/promises-example.component.html

@@ -1,4 +1,29 @@
 <div class="component">
     <h1>Les promesses</h1>
-    <app-car [value]="car"></app-car>
+    <div class="actions">
+        <button mat-raised-button (click)="showCarViaAPromise()" [disabled]="isLoading">
+            <mat-icon>visibility</mat-icon>
+            Show car via a Promise
+        </button>
+
+        <button mat-raised-button (click)="showCarViaAsyncAwaitProcess()" [disabled]="isLoading">
+            <mat-icon>visibility</mat-icon>
+            Show car via an Async Await process
+        </button>
+    </div>
+
+    <div class="section">
+        Number of loadings: {{numberOfLoadings}}
+    </div>
+
+    <div class="loading" *ngIf="isLoading">
+        <h2>Loading...</h2>
+        <mat-spinner></mat-spinner>
+    </div>
+    <div class="section" *ngIf="isLoaded">
+        <h2>Car data</h2>
+        <div class="centered">
+            <app-car [value]="car"></app-car>
+        </div>
+    </div>
 </div>

src/app/promises-example/promises-example.component.scss

@@ -0,0 +1,11 @@
+.component {
+  .actions {
+    display: flex;
+    gap: 1rem;
+  }
+  .loading {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+}

src/app/promises-example/promises-example.component.ts

@@ -1,24 +1,95 @@
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
 import {Car} from "../core/model/car";
+import {MatSnackBar} from "@angular/material/snack-bar";
 
-@Component({
+const CAR: Car = {
-  selector: 'app-promises-example',
-  templateUrl: './promises-example.component.html',
-  styleUrls: ['./promises-example.component.scss']
-})
-export class PromisesExampleComponent {
-  car?: Car = {
     id: 1,
     brand: 'Toyota',
     model: 'Yaris',
     power: 12,
     numberOfSeats: 5
-  };
+};
 
-  /*
+@Component({
-  // Async / Await -> + comparaison avec les then
+    selector: 'app-promises-example',
-  // new Promise "à la main"
+    templateUrl: './promises-example.component.html',
-  // les then chaînés
+    styleUrls: ['./promises-example.component.scss']
-  // catch (avec 1 ou plusieurs then) -> try/catch avec un await
+})
-   */
+export class PromisesExampleComponent {
+    car?: Car;
+    isLoading: boolean = false;
+    isLoaded: boolean = false;
+    numberOfLoadings: number = 0;
+
+    constructor(
+        private snackBar: MatSnackBar
+    ) {
+    }
+
+    // ******************************************
+    // Mode Promise avec les then/catch/finally
+    // ******************************************
+    showCarViaAPromise(): void {
+        this.loadCarViaAPromise();
+    }
+
+    private loadCarViaAPromise(): void {
+        this.isLoading = true;
+        this.isLoaded = false;
+
+        this.findViaPromise()
+            .then(car => {
+                this.car = car;
+                this.isLoaded = true;
+            })
+            .catch(error => {
+                this.snackBar.open(`Error while loading car. Cause : ${error}`);
+            })
+            .finally(() => {
+                this.isLoading = false;
+                this.numberOfLoadings++;
+            });
+    }
+
+    private findViaPromise(): Promise<Car> {
+        return new Promise<Car>((resolve, reject) => {
+            if (this.numberOfLoadings % 2 === 0) {
+                setTimeout(() => {
+                    resolve(CAR);
+                }, 2000);
+            } else {
+                reject('It\'s an odd call number.');
+            }
+        });
+    }
+
+    // ******************************************
+    // Mode async/await
+    // ******************************************
+    showCarViaAsyncAwaitProcess(): void {
+        this.loadCarViaAsyncAwaitProcess();
+    }
+
+    private async loadCarViaAsyncAwaitProcess(): Promise<void> {
+        this.isLoading = true;
+        this.isLoaded = false;
+
+        try {
+            this.car = await this.findViaAsyncAwaitProcess();
+            this.isLoaded = true;
+        } catch (error) {
+            this.snackBar.open(`Error while loading car. Cause : ${error}`);
+        }
+
+        this.numberOfLoadings++;
+        this.isLoading = false;
+    }
+
+    private async findViaAsyncAwaitProcess(): Promise<Car> {
+        if (this.numberOfLoadings % 2 !== 0) {
+            throw 'It\'s an odd call number.';
+        }
+        await new Promise(resolve => setTimeout(resolve, 2000));
+        return CAR;
+    }
 }

src/styles.scss

@@ -7,4 +7,8 @@ body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
   display: flex;
   flex-direction: row;
   justify-content: center;
+}
+
+.section {
+  margin: 1rem 0;
 }