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); + } +}