Updated to angular 11

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

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