diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index b1f4940..02bceb2 100644
--- a/src/app/app.module.ts
+++ b/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]
diff --git a/src/app/core/components/car/car.component.html b/src/app/core/components/car/car.component.html
index 414682d..a16339b 100644
--- a/src/app/core/components/car/car.component.html
+++ b/src/app/core/components/car/car.component.html
@@ -5,7 +5,7 @@
Brand : {{car?.brand}}
- Power : {{car?.power}} cv
+ Power : {{car?.power}} hp
{{car?.numberOfSeats}} seats
diff --git a/src/app/core/core.module.ts b/src/app/core/core.module.ts
new file mode 100644
index 0000000..a603080
--- /dev/null
+++ b/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 {
+}
diff --git a/src/app/core/material.module.ts b/src/app/core/material.module.ts
new file mode 100644
index 0000000..6ad7bd0
--- /dev/null
+++ b/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 {
+
+}
\ No newline at end of file
diff --git a/src/app/observables-example/observables-example.component.html b/src/app/observables-example/observables-example.component.html
index 82ae636..28834fb 100644
--- a/src/app/observables-example/observables-example.component.html
+++ b/src/app/observables-example/observables-example.component.html
@@ -1 +1,3 @@
-observables-example works!
+
\ No newline at end of file
diff --git a/src/app/observables-example/observables-example.module.ts b/src/app/observables-example/observables-example.module.ts
new file mode 100644
index 0000000..296232d
--- /dev/null
+++ b/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 {
+}
diff --git a/src/app/observables-example/simple-observable-exemple/simple-observable-exemple.component.html b/src/app/observables-example/simple-observable-exemple/simple-observable-exemple.component.html
new file mode 100644
index 0000000..9f975ca
--- /dev/null
+++ b/src/app/observables-example/simple-observable-exemple/simple-observable-exemple.component.html
@@ -0,0 +1,19 @@
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/app/observables-example/simple-observable-exemple/simple-observable-exemple.component.scss b/src/app/observables-example/simple-observable-exemple/simple-observable-exemple.component.scss
new file mode 100644
index 0000000..cfbde64
--- /dev/null
+++ b/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;
+ }
+}
\ No newline at end of file
diff --git a/src/app/observables-example/simple-observable-exemple/simple-observable-exemple.component.ts b/src/app/observables-example/simple-observable-exemple/simple-observable-exemple.component.ts
new file mode 100644
index 0000000..456282f
--- /dev/null
+++ b/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 = new BehaviorSubject([]);
+ private cars: Car[] = [];
+
+ get cars$(): Observable {
+ 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);
+ }
+}