Ajout du modèle Car et du composant permettant de l'afficher.

src/app/app.module.ts

@@ -12,6 +12,8 @@ import { BackToHomeComponent } from './back-to-home/back-to-home.component';
 import {MatIconModule} from "@angular/material/icon";
 import { ObservablesExampleComponent } from './observables-example/observables-example.component';
 import { StateManagementExampleComponent } from './state-management-example/state-management-example.component';
+import {RestServicesModule} from "./core/rest-services/rest-services.module";
+import { CarComponent } from './core/components/car/car.component';
 
 @NgModule({
     declarations: [
@@ -21,14 +23,16 @@ import { StateManagementExampleComponent } from './state-management-example/stat
         HomeComponent,
         BackToHomeComponent,
         ObservablesExampleComponent,
-        StateManagementExampleComponent
+        StateManagementExampleComponent,
+        CarComponent
     ],
     imports: [
         BrowserModule,
         AppRoutingModule,
         BrowserAnimationsModule,
         MatButtonModule,
-        MatIconModule
+        MatIconModule,
+        RestServicesModule
     ],
     providers: [],
     bootstrap: [AppComponent]

src/app/core/components/car/car.component.html

@@ -0,0 +1,14 @@
+<div class="component">
+    <h1>{{car?.model}}</h1>
+    <ul>
+        <li>
+            Brand : {{car?.brand}}
+        </li>
+        <li>
+            Power : {{car?.power}} cv
+        </li>
+        <li>
+            {{car?.numberOfSeats}} seats
+        </li>
+    </ul>
+</div>

src/app/core/components/car/car.component.scss

@@ -0,0 +1,18 @@
+.component {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #ccc;
+  box-shadow: 0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f;
+  border-radius: .5rem;
+  width: 10rem;
+  padding: 1rem;
+
+  h1 {
+    display: flex;
+    justify-content: center;
+  }
+
+  ul {
+    margin: 0;
+  }
+}

src/app/core/components/car/car.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CarComponent } from './car.component';
+
+describe('CarComponent', () => {
+  let component: CarComponent;
+  let fixture: ComponentFixture<CarComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CarComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/core/components/car/car.component.ts

@@ -0,0 +1,11 @@
+import {Component, Input} from '@angular/core';
+import {Car} from "../../model/car";
+
+@Component({
+  selector: 'app-car',
+  templateUrl: './car.component.html',
+  styleUrls: ['./car.component.scss']
+})
+export class CarComponent {
+  @Input("value") car?: Car;
+}

src/app/core/model/car.ts

@@ -0,0 +1,7 @@
+export interface Car {
+    id: string;
+    brand: string;
+    model: string;
+    power: number;
+    numberOfSeats: number;
+}

src/app/core/rest-services/car.rest-service.ts

@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+import {HttpClient} from "@angular/common/http";
+import {Car} from "../model/car";
+import {toPromise} from "../utils/promises.utils";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CarRestService {
+
+  constructor(
+      private http: HttpClient
+  ) { }
+
+  findById(carId: string): Promise<Car> {
+    return toPromise(this.http.get<Car>(`/cars/${carId}`));
+  }
+}

src/app/core/rest-services/rest-services.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule
+  ]
+})
+export class RestServicesModule { }

src/app/core/utils/promises.utils.ts

@@ -0,0 +1,5 @@
+import {firstValueFrom, Observable} from "rxjs";
+
+export function toPromise<T>(observable: Observable<T>): Promise<T> {
+    return firstValueFrom(observable);
+}

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

@@ -1 +1,4 @@
-<p>promises-example works!</p>
+<div class="component">
+    <h1>Les promesses</h1>
+    <app-car [value]="car"></app-car>
+</div>

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

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import {Car} from "../core/model/car";
 
 @Component({
   selector: 'app-promises-example',
@@ -6,5 +7,11 @@ import { Component } from '@angular/core';
   styleUrls: ['./promises-example.component.scss']
 })
 export class PromisesExampleComponent {
-
+  car?: Car = {
+    id: '1234567890',
+    brand: 'Toyota',
+    model: 'Yaris',
+    power: 12,
+    numberOfSeats: 5
+  };
 }