Updated to angular 11

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

bookie/src/app/modifier-categories/modifier-category-detail/modifier-category-detail.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { ModifierCategoryDetailComponent } from './modifier-category-detail.component';
 
@@ -6,11 +6,13 @@ describe('ModifierCategoryDetailComponent', () => {
   let component: ModifierCategoryDetailComponent;
   let fixture: ComponentFixture<ModifierCategoryDetailComponent>;
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ModifierCategoryDetailComponent],
-    }).compileComponents();
-  }));
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        declarations: [ModifierCategoryDetailComponent],
+      }).compileComponents();
+    }),
+  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ModifierCategoryDetailComponent);

bookie/src/app/modifier-categories/modifier-category-detail/modifier-category-detail.component.ts

@@ -18,13 +18,13 @@ import { ModifierCategoryService } from '../modifier-category.service';
   styleUrls: ['./modifier-category-detail.component.css'],
 })
 export class ModifierCategoryDetailComponent implements OnInit, AfterViewInit {
-  @ViewChild('nameElement', { static: true }) nameElement: ElementRef;
+  @ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
   form: FormGroup;
-  item: ModifierCategory;
+  item: ModifierCategory = new ModifierCategory();
   treeControl = new NestedTreeControl<any>((node) => node.products);
   dataSource = new MatTreeNestedDataSource<any>();
-  products: Map<string, Product>;
-  productsOfMenuCategory: Map<string, Product[]>;
+  products: Map<string, Product> = new Map<string, Product>();
+  productsOfMenuCategory: Map<string, Product[]> = new Map<string, Product[]>();
 
   constructor(
     private route: ActivatedRoute,
@@ -34,21 +34,19 @@ export class ModifierCategoryDetailComponent implements OnInit, AfterViewInit {
     private dialog: MatDialog,
     private ser: ModifierCategoryService,
   ) {
-    this.createForm();
-    this.dataSource.data = [];
-  }
-
-  createForm() {
+    // Create form
     this.form = this.fb.group({
       name: '',
       minimum: '',
       maximum: '',
       isActive: '',
     });
+    this.dataSource.data = [];
   }
 
   ngOnInit() {
-    this.route.data.subscribe((data: { item: ModifierCategory }) => {
+    this.route.data.subscribe((value) => {
+      const data = value as { item: ModifierCategory };
       this.showItem(data.item);
     });
   }
@@ -66,11 +64,11 @@ export class ModifierCategoryDetailComponent implements OnInit, AfterViewInit {
     this.productsOfMenuCategory = new Map();
     this.item.menuCategories.forEach((mc: MenuCategory) => {
       mc.products.forEach((p: Product) => {
-        this.products.set(p.id, p);
-        if (!this.productsOfMenuCategory.has(mc.id)) {
-          this.productsOfMenuCategory.set(mc.id, []);
+        this.products.set(p.id as string, p);
+        if (!this.productsOfMenuCategory.has(mc.id as string)) {
+          this.productsOfMenuCategory.set(mc.id as string, []);
         }
-        this.productsOfMenuCategory.get(mc.id).push(p);
+        (this.productsOfMenuCategory.get(mc.id as string) as Product[]).push(p);
       });
     });
     // this.setMenuCategories();
@@ -78,7 +76,9 @@ export class ModifierCategoryDetailComponent implements OnInit, AfterViewInit {
 
   ngAfterViewInit() {
     setTimeout(() => {
-      this.nameElement.nativeElement.focus();
+      if (this.nameElement !== undefined) {
+        this.nameElement.nativeElement.focus();
+      }
     }, 0);
   }
 
@@ -100,7 +100,7 @@ export class ModifierCategoryDetailComponent 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('/modifier-categories');
@@ -136,34 +136,39 @@ export class ModifierCategoryDetailComponent implements OnInit, AfterViewInit {
   hasChild = (_: number, node: any) => !!node.products && node.products.length > 0;
 
   isProductSelected(node: Product) {
-    return this.products.get(node.id).enabled;
+    return (this.products.get(node.id as string) as Product).enabled;
   }
 
   isMenuCategorySelected(node: MenuCategory) {
-    return this.productsOfMenuCategory
-      .get(node.id)
-      .reduce((acc, current) => acc && current.enabled, true);
+    return (this.productsOfMenuCategory.get(node.id as string) as Product[]).reduce(
+      (acc: boolean, current: Product) => acc && current.enabled,
+      true,
+    );
   }
 
   isMenuCategoryPartiallySelected(node: MenuCategory) {
-    const total = this.productsOfMenuCategory.get(node.id).length;
-    const ticked = this.productsOfMenuCategory.get(node.id).reduce((acc, current) => {
-      if (current.enabled) {
-        // eslint-disable-next-line no-param-reassign
-        acc += 1;
-      }
-      return acc;
-    }, 0);
+    const total = (this.productsOfMenuCategory.get(node.id as string) as Product[]).length;
+    const ticked = (this.productsOfMenuCategory.get(node.id as string) as Product[]).reduce(
+      (acc, current) => {
+        if (current.enabled) {
+          // eslint-disable-next-line no-param-reassign
+          acc += 1;
+        }
+        return acc;
+      },
+      0,
+    );
     return ticked > 0 && ticked < total;
   }
 
   toggleProductSelection(node: Product) {
-    this.products.get(node.id).enabled = !this.products.get(node.id).enabled;
+    (this.products.get(node.id as string) as Product).enabled = !(this.products.get(node.id as string) as Product)
+      .enabled;
   }
 
   toggleMenuCategorySelection(node: MenuCategory) {
     const sel = !this.isMenuCategorySelected(node);
-    this.productsOfMenuCategory.get(node.id).forEach((p) => {
+    (this.productsOfMenuCategory.get(node.id as string) as Product[]).forEach((p) => {
       p.enabled = sel;
     });
     return sel;

bookie/src/app/modifier-categories/modifier-category-list/modifier-category-list.component.ts

@@ -11,15 +11,16 @@ import { ModifierCategoryListDatasource } from './modifier-category-list-datasou
   styleUrls: ['./modifier-category-list.component.css'],
 })
 export class ModifierCategoryListComponent implements OnInit {
-  dataSource: ModifierCategoryListDatasource;
-  list: ModifierCategory[];
+  list: ModifierCategory[] = [];
+  dataSource: ModifierCategoryListDatasource = new ModifierCategoryListDatasource(this.list);
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns = ['name', 'minimum', 'maximum', 'products', 'isActive'];
 
   constructor(private route: ActivatedRoute) {}
 
   ngOnInit() {
-    this.route.data.subscribe((data: { list: ModifierCategory[] }) => {
+    this.route.data.subscribe((value) => {
+      const data = value as { list: ModifierCategory[] };
       this.list = data.list;
     });
     this.dataSource = new ModifierCategoryListDatasource(this.list);

bookie/src/app/modifier-categories/modifier-category.service.ts

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