Resutat après le cours n°5 et les sub/pub avec Subject

src/app/components/employees/employees-list/employee-item/employee-item.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { Employee } from '../../../../model/employee.model';
 import { AppDataState, DataStateEnum, EmployeeActionsTypes, ActEvent } from '../../../../state/employee.state';
+import { EventDriverService } from '../../../../services/event.driver.service';
 
 @Component({
   selector: 'app-employee-item',
@@ -9,19 +10,18 @@ import { AppDataState, DataStateEnum, EmployeeActionsTypes, ActEvent } from '../
 })
 export class EmployeeItemComponent implements OnInit {
 	@Input() employee?:Employee;
-	@Output() evtEmit:EventEmitter<ActEvent>=new EventEmitter();
-	constructor() { }
+	constructor(private evDrivenService:EventDriverService) { }
 
 	ngOnInit(): void { }
 
 	onDelete(val:Employee) {
-		this.evtEmit.emit({
+		this.evDrivenService.publishEvent({
 			type:EmployeeActionsTypes.DELETE_EMPLOYEE, payload:val
 		});
 	}
 
 	onEdit(val:Employee) {
-		this.evtEmit.emit({
+		this.evDrivenService.publishEvent({
 			type:EmployeeActionsTypes.EDIT_EMPLOYEE, payload:val
 		});
 	}

src/app/components/employees/employees-list/employees-list.component.html

@@ -16,7 +16,7 @@
 					</tr>
 				</thead>
 				<tbody>
-					<app-employee-item [employee]="p" (evtEmit)="onActionEvent($event)" *ngFor="let p of result.data" style="display: contents">
+					<app-employee-item [employee]="p" *ngFor="let p of result.data" style="display: contents">
 					</app-employee-item>
 				</tbody>
 			</table>

src/app/components/employees/employees-list/employees-list.component.ts

@@ -10,14 +10,9 @@ import { Observable, of } from 'rxjs';
 })
 export class EmployeesListComponent implements OnInit {
 	@Input() employeesInput$:Observable<AppDataState<Employee[]>>|null=null;
-	@Output() evtEmit:EventEmitter<ActEvent>=new EventEmitter();
 	readonly DataStateEnum=DataStateEnum;
 
 	constructor() { }
 
 	ngOnInit(): void { }
-
-	onActionEvent($event:ActEvent) {
-		this.evtEmit.emit($event);
-	}
 }

src/app/components/employees/employees-navbar/employees-navbar.component.ts

@@ -1,5 +1,6 @@
-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { EmployeeActionsTypes, ActEvent } from '../../../state/employee.state';
+import { EventDriverService } from '../../../services/event.driver.service';
 
 @Component({
   selector: 'app-employees-navbar',
@@ -8,21 +9,20 @@ import { EmployeeActionsTypes, ActEvent } from '../../../state/employee.state';
 })
 export class EmployeesNavbarComponent implements OnInit {
 
-	@Output() evtEmit:EventEmitter<ActEvent>=new EventEmitter();
-	constructor() { }
+	constructor(private evDriveService:EventDriverService) { }
 
 	ngOnInit(): void {
 	}
 
 	onGetAllEmployees() {
-		this.evtEmit.emit({type:EmployeeActionsTypes.GET_ALL_EMPLOYEES});
+		this.evDriveService.publishEvent({type:EmployeeActionsTypes.GET_ALL_EMPLOYEES});
 	}
 
 	onSearch(val:any) {
-		this.evtEmit.emit({type:EmployeeActionsTypes.SEARCH_EMPLOYEES, payload:val});
+		this.evDriveService.publishEvent({type:EmployeeActionsTypes.SEARCH_EMPLOYEES, payload:val});
 	}
 
 	onNewEmployee() {
-		this.evtEmit.emit({type:EmployeeActionsTypes.NEW_EMPLOYEE});
+		this.evDriveService.publishEvent({type:EmployeeActionsTypes.NEW_EMPLOYEE});
 	}
 }

src/app/components/employees/employees.component.html

@@ -1,2 +1,2 @@
-<app-employees-navbar (evtEmit)="onActionEvent($event)"></app-employees-navbar>
-<app-employees-list [employeesInput$]="employees$" (evtEmit)="onActionEvent($event)"></app-employees-list>
+<app-employees-navbar></app-employees-navbar>
+<app-employees-list [employeesInput$]="employees$"></app-employees-list>

src/app/components/employees/employees.component.ts

@@ -1,8 +1,9 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { EmployeesService } from '../../services/employees.service';
+import { EventDriverService } from '../../services/event.driver.service';
 import { Employee } from '../../model/employee.model';
 import { AppDataState, DataStateEnum, EmployeeActionsTypes, ActEvent } from '../../state/employee.state';
-import { Observable, of } from 'rxjs';
+import { Observable, of, Subscription } from 'rxjs';
 import { catchError, map, startWith } from 'rxjs/operators';
 import { Router } from '@angular/router';
 
@@ -11,13 +12,23 @@ import { Router } from '@angular/router';
   templateUrl: './employees.component.html',
   styleUrls: ['./employees.component.css']
 })
-export class EmployeesComponent implements OnInit {
+export class EmployeesComponent implements OnInit, OnDestroy {
 	employees$:Observable<AppDataState<Employee[]>>|null=null;
 	readonly DataStateEnum=DataStateEnum;
+	sub:Subscription;
 
-	constructor(private employeesService:EmployeesService, private router:Router) { }
+	constructor(private employeesService:EmployeesService, private router:Router, private evDriveService:EventDriverService) {
+	}
 
-	ngOnInit(): void { }
+	ngOnInit(): void {
+		this.sub=this.evDriveService.sourceEventSubjectObservable.subscribe((actionEv:ActEvent)=>{
+			this.onActionEvent(actionEv);
+		});
+	}
+
+	ngOnDestroy(): void {
+		this.sub.unsubscribe();
+	}
 
 	onActionEvent($event: ActEvent) {
 		switch($event.type) {
@@ -68,11 +79,14 @@ export class EmployeesComponent implements OnInit {
 	}
 
 	onDelete(val:Employee) {
+		let v=confirm("Etes vous sûre?");
+     	if(v==true) {
 			this.employeesService.deleteEmployee(val).subscribe(
 				data=>{
 					this.onGetAllEmployees();
 				});
 		}
+	}
 
 	onNewEmployee() {
 		this.router.navigateByUrl("/newEmployee");

src/app/services/event.driver.service.ts

@@ -0,0 +1,13 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+import { ActEvent } from '../state/employee.state';
+
+@Injectable({providedIn:"root"})
+export class EventDriverService {
+	sourceEventSubject:Subject<ActEvent>=new Subject<ActEvent>();
+	sourceEventSubjectObservable=this.sourceEventSubject.asObservable();
+
+	publishEvent(event:ActEvent) {
+		this.sourceEventSubject.next(event);
+	}
+}

src/app/state/employee.state.ts

@@ -8,7 +8,8 @@ export enum EmployeeActionsTypes {
 
 export interface ActEvent {
 	type:EmployeeActionsTypes,
-	payload?:any
+	payload?:any,
+	errMsg?:string
 }
 
 export enum DataStateEnum {

tsconfig.json

@@ -10,6 +10,7 @@
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
+	"strictPropertyInitialization": false,
     "sourceMap": true,
     "declaration": false,
     "downlevelIteration": true,