Updated to angular 11

Now compiling with strict mode in typescript
Need to error checking now

bookie/src/app/guest-book/guest-book-detail/guest-book-detail.component.ts

@@ -12,9 +12,9 @@ import { GuestBookService } from '../guest-book.service';
   styleUrls: ['./guest-book-detail.component.css'],
 })
 export class GuestBookDetailComponent implements OnInit, AfterViewInit {
-  @ViewChild('name', { static: true }) nameElement: ElementRef;
+  @ViewChild('name', { static: true }) nameElement?: ElementRef;
   form: FormGroup;
-  item: GuestBook;
+  item: GuestBook = new GuestBook();
 
   constructor(
     private fb: FormBuilder,
@@ -23,10 +23,7 @@ export class GuestBookDetailComponent implements OnInit, AfterViewInit {
     private toaster: ToasterService,
     private ser: GuestBookService,
   ) {
-    this.createForm();
-  }
-
-  createForm() {
+    // Create form
     this.form = this.fb.group({
       name: [null, Validators.required],
       phone: [null, Validators.required],
@@ -36,14 +33,17 @@ export class GuestBookDetailComponent implements OnInit, AfterViewInit {
   }
 
   ngOnInit() {
-    this.route.data.subscribe((data: { item: GuestBook }) => {
+    this.route.data.subscribe((value) => {
+      const data = value as { item: GuestBook };
       this.showItem(data.item);
     });
   }
 
   ngAfterViewInit() {
     setTimeout(() => {
-      this.nameElement.nativeElement.focus();
+      if (this.nameElement !== undefined) {
+        this.nameElement.nativeElement.focus();
+      }
     }, 0);
   }
 
@@ -52,7 +52,7 @@ export class GuestBookDetailComponent implements OnInit, AfterViewInit {
     this.form.setValue({
       name: item.name,
       phone: item.phone,
-      pax: `${item.pax}`,
+      pax: item.pax,
       address: item.address,
     });
   }

bookie/src/app/guest-book/guest-book-list.ts

@@ -3,4 +3,10 @@ import { GuestBook } from './guest-book';
 export class GuestBookList {
   date: string;
   list: GuestBook[];
+
+  public constructor(init?: Partial<GuestBookList>) {
+    this.date = '';
+    this.list = [];
+    Object.assign(this, init);
+  }
 }

bookie/src/app/guest-book/guest-book-list/guest-book-list.component.css

@@ -3,13 +3,11 @@
 }
 
 .running {
-  /* Red 900 */
-  background-color: #b71c1c;
-  color: #ffffff;
+  background-color: #f8cbad;
+  color: #000000;
 }
 
 .printed {
-  /* Green 900 */
-  background-color: #1b5e20;
-  color: #ffffff;
+  background-color: #c6e0b4;
+  color: #000000;
 }

bookie/src/app/guest-book/guest-book-list/guest-book-list.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } 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';
@@ -20,9 +20,9 @@ import { GuestBookListDataSource } from './guest-book-list-datasource';
   styleUrls: ['./guest-book-list.component.css'],
 })
 export class GuestBookListComponent implements OnInit {
-  dataSource: GuestBookListDataSource;
+  data: BehaviorSubject<GuestBook[]> = new BehaviorSubject<GuestBook[]>([]);
+  dataSource: GuestBookListDataSource = new GuestBookListDataSource(this.data);
   form: FormGroup;
-  data: BehaviorSubject<GuestBook[]>;
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns = ['sno', 'name', 'phone', 'pax', 'date', 'action'];
 
@@ -34,21 +34,16 @@ export class GuestBookListComponent implements OnInit {
     private toaster: ToasterService,
     private ser: GuestBookService,
   ) {
-    this.createForm();
-    this.data = new BehaviorSubject([]);
-    this.listenToDateChange();
-  }
-
-  createForm() {
+    // Create form
     this.form = this.fb.group({
       date: '',
     });
+    this.listenToDateChange();
   }
 
   listenToDateChange(): void {
-    this.form
-      .get('date')
-      .valueChanges.pipe(map((x) => moment(x).format('DD-MMM-YYYY')))
+    (this.form.get('date') as FormControl).valueChanges
+      .pipe(map((x) => moment(x).format('DD-MMM-YYYY')))
       .subscribe((x) => {
         return this.ser.list(x).subscribe((list: GuestBookList) => {
           this.data.next(list.list);
@@ -57,7 +52,8 @@ export class GuestBookListComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.route.data.subscribe((data: { list: GuestBookList }) => {
+    this.route.data.subscribe((value) => {
+      const data = value as { list: GuestBookList };
       this.data.next(data.list.list);
       this.form.setValue({ date: moment(data.list.date, 'DD-MMM-YYYY').toDate() });
     });

bookie/src/app/guest-book/guest-book.service.ts

@@ -19,7 +19,7 @@ const serviceName = 'GuestBookService';
 export class GuestBookService {
   constructor(private http: HttpClient, private log: ErrorLoggerService) {}
 
-  get(id: string): Observable<GuestBook> {
+  get(id: string | null): Observable<GuestBook> {
     const getUrl: string = id === null ? url : `${url}/${id}`;
     return <Observable<GuestBook>>(
       this.http
@@ -28,7 +28,7 @@ export class GuestBookService {
     );
   }
 
-  list(date: string): Observable<GuestBookList> {
+  list(date: string | null): Observable<GuestBookList> {
     const options = { params: new HttpParams().set('q', date === null ? '' : date) };
     return <Observable<GuestBookList>>(
       this.http

bookie/src/app/guest-book/guest-book.ts

@@ -1,5 +1,5 @@
 export class GuestBook {
-  id: string;
+  id: string | undefined;
   serial: number;
   name: string;
   phone: string;
@@ -12,6 +12,13 @@ export class GuestBook {
   tableName?: string;
 
   public constructor(init?: Partial<GuestBook>) {
+    this.id = undefined;
+    this.serial = 0;
+    this.name = '';
+    this.phone = '';
+    this.pax = 0;
+    this.address = '';
+    this.date = '';
     Object.assign(this, init);
   }
 }