Strict done!!

overlord/src/app/employee/employee-detail/employee-detail.component.ts

@@ -1,5 +1,5 @@
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 import * as moment from 'moment';
@@ -18,8 +18,8 @@ import { EmployeeService } from '../employee.service';
 export class EmployeeDetailComponent implements OnInit, AfterViewInit {
   @ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
   form: FormGroup;
-  costCentres: CostCentre[];
-  item: Employee;
+  costCentres: CostCentre[] = [];
+  item: Employee = new Employee();
 
   constructor(
     private route: ActivatedRoute,
@@ -40,7 +40,10 @@ export class EmployeeDetailComponent implements OnInit, AfterViewInit {
       joiningDate: '',
       leavingDate: '',
     });
-    this.listenToIsActiveChanges();
+    // Listen to IsActive Changes
+    (this.form.get('isActive') as FormControl).valueChanges.subscribe((x) => {
+      this.item.isActive = x;
+    });
   }
 
   ngOnInit() {
@@ -73,16 +76,10 @@ export class EmployeeDetailComponent implements OnInit, AfterViewInit {
 
   ngAfterViewInit() {
     setTimeout(() => {
-      this.nameElement.nativeElement.focus();
+      if (this.nameElement) this.nameElement.nativeElement.focus();
     }, 0);
   }
 
-  listenToIsActiveChanges(): void {
-    this.form.get('isActive').valueChanges.subscribe((x) => {
-      this.item.isActive = x;
-    });
-  }
-
   save() {
     this.ser.saveOrUpdate(this.getItem()).subscribe(
       () => {
@@ -96,7 +93,7 @@ export class EmployeeDetailComponent implements OnInit, AfterViewInit {
   }
 
   delete() {
-    this.ser.delete(this.item.id).subscribe(
+    this.ser.delete(this.item.id as string).subscribe(
       () => {
         this.toaster.show('Success', '');
         this.router.navigateByUrl('/employees');

overlord/src/app/employee/employee-list/employee-list-datasource.ts

@@ -12,7 +12,7 @@ function compare(a: string | number, b: string | number, isAsc: boolean) {
   return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
 }
 export class EmployeeListDataSource extends DataSource<Employee> {
-  private filterValue: string = "";
+  private filterValue = '';
 
   constructor(
     public data: Employee[],
@@ -94,7 +94,7 @@ export class EmployeeListDataSource extends DataSource<Employee> {
         case 'joiningDate':
           return compare(a.joiningDate, b.joiningDate, isAsc);
         case 'leavingDate':
-          return compare(a.leavingDate || "", b.leavingDate || "", isAsc);
+          return compare(a.leavingDate || '', b.leavingDate || '', isAsc);
         default:
           return 0;
       }

overlord/src/app/employee/employee-list/employee-list.component.ts

@@ -1,5 +1,5 @@
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { ActivatedRoute } from '@angular/router';
@@ -23,7 +23,7 @@ export class EmployeeListComponent implements OnInit, AfterViewInit {
   dataSource: EmployeeListDataSource;
   filter: Observable<string>;
   form: FormGroup;
-  list: Employee[];
+  list: Employee[] = [];
 
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns = [
@@ -41,13 +41,12 @@ export class EmployeeListComponent implements OnInit, AfterViewInit {
     this.form = this.fb.group({
       filter: '',
     });
-    this.filter = this.listenToFilterChange();
-  }
-
-  listenToFilterChange() {
-    return this.form
-      .get('filter')
-      .valueChanges.pipe(startWith(''), debounceTime(150), distinctUntilChanged());
+    this.filter = (this.form.get('filter') as FormControl).valueChanges.pipe(
+      startWith(''),
+      debounceTime(150),
+      distinctUntilChanged(),
+    );
+    this.dataSource = new EmployeeListDataSource(this.list, this.filter);
   }
 
   ngOnInit() {
@@ -56,12 +55,12 @@ export class EmployeeListComponent implements OnInit, AfterViewInit {
 
       this.list = data.list;
     });
-    this.dataSource = new EmployeeListDataSource(this.paginator, this.sort, this.filter, this.list);
+    this.dataSource = new EmployeeListDataSource(this.list, this.filter, this.paginator, this.sort);
   }
 
   ngAfterViewInit() {
     setTimeout(() => {
-      this.filterElement.nativeElement.focus();
+      if (this.filterElement) this.filterElement.nativeElement.focus();
     }, 0);
   }
 

overlord/src/app/employee/employee.service.ts

@@ -18,7 +18,7 @@ const serviceName = 'EmployeeService';
 export class EmployeeService {
   constructor(private http: HttpClient, private log: ErrorLoggerService) {}
 
-  get(id: string): Observable<Employee> {
+  get(id: string | null): Observable<Employee> {
     const getUrl: string = id === null ? `${url}` : `${url}/${id}`;
     return <Observable<Employee>>(
       this.http

overlord/src/app/employee/employee.ts

@@ -10,19 +10,19 @@ export class Employee {
   salary: number;
   points: number;
   joiningDate: string;
-  leavingDate?: string;
+  leavingDate: string | null;
   costCentre: CostCentre;
 
-
   public constructor(init?: Partial<Employee>) {
     this.code = 0;
-    this.name = "";
+    this.name = '';
     this.isStarred = false;
     this.isActive = true;
-    this.designation = "";
+    this.designation = '';
     this.salary = 0;
     this.points = 0;
-    this.joiningDate = "";
+    this.joiningDate = '';
+    this.leavingDate = null;
     this.costCentre = new CostCentre();
     Object.assign(this, init);
   }