Ajout d'un exemple simple sur les observables.

src/app/app.module.ts

@@ -8,12 +8,13 @@ import {HeaderComponent} from './header/header.component';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {HomeComponent} from './home/home.component';
 import {MatButtonModule} from "@angular/material/button";
-import { BackToHomeComponent } from './back-to-home/back-to-home.component';
+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 {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';
+import {CarComponent} from './core/components/car/car.component';
+import {ObservablesExampleModule} from "./observables-example/observables-example.module";
+import {CoreModule} from "./core/core.module";
 
 @NgModule({
     declarations: [
@@ -22,17 +23,17 @@ import { CarComponent } from './core/components/car/car.component';
         HeaderComponent,
         HomeComponent,
         BackToHomeComponent,
-        ObservablesExampleComponent,
         StateManagementExampleComponent,
-        CarComponent
     ],
     imports: [
+        CoreModule,
         BrowserModule,
         AppRoutingModule,
         BrowserAnimationsModule,
         MatButtonModule,
         MatIconModule,
-        RestServicesModule
+        RestServicesModule,
+        ObservablesExampleModule
     ],
     providers: [],
     bootstrap: [AppComponent]

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

@@ -5,7 +5,7 @@
             Brand : {{car?.brand}}
         </li>
         <li>
-            Power : {{car?.power}} cv
+            Power : {{car?.power}} hp
         </li>
         <li>
             {{car?.numberOfSeats}} seats

src/app/core/core.module.ts

@@ -0,0 +1,24 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {CarComponent} from "./components/car/car.component";
+import {RestServicesModule} from "./rest-services/rest-services.module";
+import {MaterialModule} from "./material.module";
+
+
+@NgModule({
+    declarations: [
+        CarComponent
+    ],
+    imports: [
+        CommonModule,
+        RestServicesModule,
+        MaterialModule
+    ],
+    exports: [
+        CarComponent,
+        RestServicesModule,
+        MaterialModule
+    ]
+})
+export class CoreModule {
+}

src/app/core/material.module.ts

@@ -0,0 +1,18 @@
+import {NgModule} from "@angular/core";
+import {MatIconModule} from "@angular/material/icon";
+import {MatButtonModule} from "@angular/material/button";
+import {MatTooltipModule} from "@angular/material/tooltip";
+
+const IMPORTED_MATERIAL_MODULES = [
+    MatIconModule,
+    MatButtonModule,
+    MatTooltipModule
+]
+
+@NgModule({
+    imports: IMPORTED_MATERIAL_MODULES,
+    exports: IMPORTED_MATERIAL_MODULES
+})
+export class MaterialModule {
+
+}

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

@@ -1 +1,3 @@
-<p>observables-example works!</p>
+<div class="component">
+    <app-simple-observable-exemple></app-simple-observable-exemple>
+</div>

src/app/observables-example/observables-example.module.ts

@@ -0,0 +1,21 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {ObservablesExampleComponent} from "./observables-example.component";
+import {SimpleObservableExempleComponent} from "./simple-observable-exemple/simple-observable-exemple.component";
+import {CoreModule} from "../core/core.module";
+
+@NgModule({
+    declarations: [
+        ObservablesExampleComponent,
+        SimpleObservableExempleComponent
+    ],
+    imports: [
+        CommonModule,
+        CoreModule
+    ],
+    exports: [
+        ObservablesExampleComponent
+    ]
+})
+export class ObservablesExampleModule {
+}

src/app/observables-example/simple-observable-exemple/simple-observable-exemple.component.html

@@ -0,0 +1,19 @@
+<div class="component">
+    <div class="actions">
+        <button mat-raised-button
+                (click)="addNewCar()"
+                style="background-color: forestgreen; color: white;"
+                matTooltip="Add a new car">
+            <mat-icon>add</mat-icon>
+        </button>
+        <button mat-raised-button
+                color="warn"
+                (click)="removeCars()"
+                matTooltip="Remove all cars">
+            <mat-icon>delete</mat-icon>
+        </button>
+    </div>
+    <div class="cars">
+        <app-car *ngFor="let car of cars$ | async" [value]="car"></app-car>
+    </div>
+</div>

src/app/observables-example/simple-observable-exemple/simple-observable-exemple.component.scss

@@ -0,0 +1,21 @@
+.component {
+  .actions {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 1rem;
+
+    button {
+      mat-icon {
+        margin: 0;
+      }
+    }
+  }
+  .cars {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 1rem;
+    margin: 1rem 0;
+  }
+}

src/app/observables-example/simple-observable-exemple/simple-observable-exemple.component.ts

@@ -0,0 +1,38 @@
+import {Component} from '@angular/core';
+import {BehaviorSubject, Observable, Subject} from "rxjs";
+import {Car} from "../../core/model/car";
+
+@Component({
+  selector: 'app-simple-observable-exemple',
+  templateUrl: './simple-observable-exemple.component.html',
+  styleUrls: ['./simple-observable-exemple.component.scss']
+})
+export class SimpleObservableExempleComponent {
+  private carsSubject: BehaviorSubject<Car[]> = new BehaviorSubject<Car[]>([]);
+  private cars: Car[] = [];
+
+  get cars$(): Observable<Car[]> {
+    return this.carsSubject.asObservable();
+  }
+
+  addNewCar(): void {
+    const newCar: Car = {
+      id: `${Math.random() * 100}`,
+      brand: 'Toyota',
+      model: 'Yaris',
+      power: 12,
+      numberOfSeats: 5
+    }
+    this.cars.push(newCar);
+    this.emitCarsUpdateEvent();
+  }
+
+  removeCars(): void {
+    this.cars = [];
+    this.emitCarsUpdateEvent();
+  }
+
+  private emitCarsUpdateEvent(): void {
+    this.carsSubject.next(this.cars);
+  }
+}