Updated to angular 11

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

bookie/src/app/home/home.component.html

@@ -3,7 +3,7 @@
     fxLayout="column"
     class="square-button"
     matRipple
-    *ngIf="auth.user && auth.user.perms.indexOf('customers') !== -1"
+    *ngIf="auth.allowed('customers')"
     [routerLink]="['/', 'guest-book']"
   >
     <h3 class="item-name">Guest Book</h3>
@@ -12,16 +12,18 @@
     fxLayout="column"
     class="square-button"
     matRipple
-    *ngIf="auth.user && auth.user.perms.indexOf('sales') !== -1"
+    *ngIf="auth.allowed('sales')"
     [routerLink]="['/', 'sales']"
   >
     <h3 class="item-name">Sales</h3>
   </mat-card>
+</div>
+<div fxLayout="row wrap" fxLayoutGap="grid 20px">
   <mat-card
     fxLayout="column"
     class="square-button"
     matRipple
-    *ngIf="auth.user && auth.user.perms.indexOf('cashier-report') !== -1"
+    *ngIf="auth.allowed('cashier-report')"
     [routerLink]="['/', 'cashier-report']"
   >
     <h3 class="item-name">Cashier Report</h3>
@@ -30,7 +32,7 @@
     fxLayout="column"
     class="square-button"
     matRipple
-    *ngIf="auth.user && auth.user.perms.indexOf('sale-report') !== -1"
+    *ngIf="auth.allowed('sale-report')"
     [routerLink]="['/', 'sale-report']"
   >
     <h3 class="item-name">Sale Report</h3>
@@ -39,7 +41,7 @@
     fxLayout="column"
     class="square-button"
     matRipple
-    *ngIf="auth.user && auth.user.perms.indexOf('tax-report') !== -1"
+    *ngIf="auth.allowed('tax-report')"
     [routerLink]="['/', 'tax-report']"
   >
     <h3 class="item-name">Tax Report</h3>
@@ -48,7 +50,7 @@
     fxLayout="column"
     class="square-button"
     matRipple
-    *ngIf="auth.user && auth.user.perms.indexOf('product-sale-report') !== -1"
+    *ngIf="auth.allowed('product-sale-report')"
     [routerLink]="['/', 'product-sale-report']"
   >
     <h3 class="item-name">Product Sale Report</h3>
@@ -57,7 +59,7 @@
     fxLayout="column"
     class="square-button"
     matRipple
-    *ngIf="auth.user && auth.user.perms.indexOf('bill-settlement-report') !== -1"
+    *ngIf="auth.allowed('bill-settlement-report')"
     [routerLink]="['/', 'bill-settlement-report']"
   >
     <h3 class="item-name">Bill Settlement Report</h3>
@@ -66,7 +68,7 @@
     fxLayout="column"
     class="square-button"
     matRipple
-    *ngIf="auth.user && auth.user.perms.indexOf('beer-sale-report') !== -1"
+    *ngIf="auth.allowed('beer-sale-report')"
     [routerLink]="['/', 'beer-sale-report']"
   >
     <h3 class="item-name">Beer Sale Report</h3>
@@ -75,52 +77,18 @@
     fxLayout="column"
     class="square-button"
     matRipple
-    *ngIf="auth.user && auth.user.perms.indexOf('discount-report') !== -1"
+    *ngIf="auth.allowed('discount-report')"
     [routerLink]="['/', 'discount-report']"
   >
     <h3 class="item-name">Discount Report</h3>
   </mat-card>
+</div>
+<div fxLayout="row wrap" fxLayoutGap="grid 20px">
   <mat-card
     fxLayout="column"
     class="square-button"
     matRipple
-    *ngIf="auth.user && auth.user.perms.indexOf('sections') !== -1"
-    [routerLink]="['/', 'tables']"
-  >
-    <h3 class="item-name">Tables</h3>
-  </mat-card>
-  <mat-card
-    fxLayout="column"
-    class="square-button"
-    matRipple
-    *ngIf="auth.user && auth.user.perms.indexOf('sections') !== -1"
-    [routerLink]="['/', 'sections']"
-  >
-    <h3 class="item-name">Sections</h3>
-  </mat-card>
-  <mat-card
-    fxLayout="column"
-    class="square-button"
-    matRipple
-    *ngIf="auth.user && auth.user.perms.indexOf('products') !== -1"
-    [routerLink]="['/', 'menu-categories']"
-  >
-    <h3 class="item-name">Menu Categories</h3>
-  </mat-card>
-  <mat-card
-    fxLayout="column"
-    class="square-button"
-    matRipple
-    *ngIf="auth.user && auth.user.perms.indexOf('products') !== -1"
-    [routerLink]="['/', 'sale-categories']"
-  >
-    <h3 class="item-name">Sale Categories</h3>
-  </mat-card>
-  <mat-card
-    fxLayout="column"
-    class="square-button"
-    matRipple
-    *ngIf="auth.user && auth.user.perms.indexOf('products') !== -1"
+    *ngIf="auth.allowed('products')"
     [routerLink]="['/', 'products']"
   >
     <h3 class="item-name">Products</h3>
@@ -129,88 +97,16 @@
     fxLayout="column"
     class="square-button"
     matRipple
-    *ngIf="auth.user && auth.user.perms.indexOf('modifiers') !== -1"
-    [routerLink]="['/', 'modifier-categories']"
+    *ngIf="auth.allowed('products')"
+    [routerLink]="['/', 'update-product-prices']"
   >
-    <h3 class="item-name">Modifier Categories</h3>
+    <h3 class="item-name">Update Product Prices</h3>
   </mat-card>
   <mat-card
     fxLayout="column"
     class="square-button"
     matRipple
-    *ngIf="auth.user && auth.user.perms.indexOf('modifiers') !== -1"
-    [routerLink]="['/', 'modifiers']"
-  >
-    <h3 class="item-name">Modifiers</h3>
-  </mat-card>
-  <mat-card
-    fxLayout="column"
-    class="square-button"
-    matRipple
-    *ngIf="auth.user && auth.user.perms.indexOf('taxes') !== -1"
-    [routerLink]="['/', 'taxes']"
-  >
-    <h3 class="item-name">Taxes</h3>
-  </mat-card>
-  <mat-card
-    fxLayout="column"
-    class="square-button"
-    matRipple
-    *ngIf="auth.user && auth.user.perms.indexOf('devices') !== -1"
-    [routerLink]="['/', 'devices']"
-  >
-    <h3 class="item-name">Devices</h3>
-  </mat-card>
-  <mat-card
-    fxLayout="column"
-    class="square-button"
-    matRipple
-    *ngIf="auth.user && auth.user.perms.indexOf('section-printers') !== -1"
-    [routerLink]="['/', 'section-printers']"
-  >
-    <h3 class="item-name">Section Printers</h3>
-  </mat-card>
-  <mat-card
-    fxLayout="column"
-    class="square-button"
-    matRipple
-    *ngIf="auth.user && auth.user.perms.indexOf('printers') !== -1"
-    [routerLink]="['/', 'printers']"
-  >
-    <h3 class="item-name">Printers</h3>
-  </mat-card>
-  <mat-card
-    fxLayout="column"
-    class="square-button"
-    matRipple
-    *ngIf="auth.user && auth.user.perms.indexOf('users') !== -1"
-    [routerLink]="['/', 'roles']"
-  >
-    <h3 class="item-name">Roles</h3>
-  </mat-card>
-  <mat-card
-    fxLayout="column"
-    class="square-button"
-    matRipple
-    *ngIf="auth.user && auth.user.perms.indexOf('users') !== -1"
-    [routerLink]="['/', 'users']"
-  >
-    <h3 class="item-name">Users</h3>
-  </mat-card>
-  <mat-card
-    fxLayout="column"
-    class="square-button"
-    matRipple
-    *ngIf="auth.user && auth.user.perms.indexOf('products') !== -1"
-    [routerLink]="['/', 'header-footer']"
-  >
-    <h3 class="item-name">Header / Footer</h3>
-  </mat-card>
-  <mat-card
-    fxLayout="column"
-    class="square-button"
-    matRipple
-    *ngIf="auth.user && auth.user.perms.indexOf('products') !== -1"
+    *ngIf="auth.allowed('products')"
     [routerLink]="['/', 'product-updates-report']"
   >
     <h3 class="item-name">Product Updates Report</h3>
@@ -219,10 +115,122 @@
     fxLayout="column"
     class="square-button"
     matRipple
-    *ngIf="auth.user && auth.user.perms.indexOf('products') !== -1"
-    [routerLink]="['/', 'update-product-prices']"
+    *ngIf="auth.allowed('modifiers')"
+    [routerLink]="['/', 'modifiers']"
   >
-    <h3 class="item-name">Update Product Prices</h3>
+    <h3 class="item-name">Modifiers</h3>
+  </mat-card>
+  <mat-card
+    fxLayout="column"
+    class="square-button"
+    matRipple
+    *ngIf="auth.allowed('modifiers')"
+    [routerLink]="['/', 'modifier-categories']"
+  >
+    <h3 class="item-name">Modifier Categories</h3>
+  </mat-card>
+</div>
+<div fxLayout="row wrap" fxLayoutGap="grid 20px">
+  <mat-card
+    fxLayout="column"
+    class="square-button"
+    matRipple
+    *ngIf="auth.allowed('sections')"
+    [routerLink]="['/', 'tables']"
+  >
+    <h3 class="item-name">Tables</h3>
+  </mat-card>
+  <mat-card
+    fxLayout="column"
+    class="square-button"
+    matRipple
+    *ngIf="auth.allowed('sections')"
+    [routerLink]="['/', 'sections']"
+  >
+    <h3 class="item-name">Sections</h3>
+  </mat-card>
+  <mat-card
+    fxLayout="column"
+    class="square-button"
+    matRipple
+    *ngIf="auth.allowed('products')"
+    [routerLink]="['/', 'menu-categories']"
+  >
+    <h3 class="item-name">Menu Categories</h3>
+  </mat-card>
+  <mat-card
+    fxLayout="column"
+    class="square-button"
+    matRipple
+    *ngIf="auth.allowed('products')"
+    [routerLink]="['/', 'sale-categories']"
+  >
+    <h3 class="item-name">Sale Categories</h3>
+  </mat-card>
+  <mat-card
+    fxLayout="column"
+    class="square-button"
+    matRipple
+    *ngIf="auth.allowed('taxes')"
+    [routerLink]="['/', 'taxes']"
+  >
+    <h3 class="item-name">Taxes</h3>
+  </mat-card>
+  <mat-card
+    fxLayout="column"
+    class="square-button"
+    matRipple
+    *ngIf="auth.allowed('devices')"
+    [routerLink]="['/', 'devices']"
+  >
+    <h3 class="item-name">Devices</h3>
+  </mat-card>
+  <mat-card
+    fxLayout="column"
+    class="square-button"
+    matRipple
+    *ngIf="auth.allowed('section-printers')"
+    [routerLink]="['/', 'section-printers']"
+  >
+    <h3 class="item-name">Section Printers</h3>
+  </mat-card>
+  <mat-card
+    fxLayout="column"
+    class="square-button"
+    matRipple
+    *ngIf="auth.allowed('printers')"
+    [routerLink]="['/', 'printers']"
+  >
+    <h3 class="item-name">Printers</h3>
+  </mat-card>
+</div>
+<div fxLayout="row wrap" fxLayoutGap="grid 20px">
+  <mat-card
+    fxLayout="column"
+    class="square-button"
+    matRipple
+    *ngIf="auth.allowed('users')"
+    [routerLink]="['/', 'roles']"
+  >
+    <h3 class="item-name">Roles</h3>
+  </mat-card>
+  <mat-card
+    fxLayout="column"
+    class="square-button"
+    matRipple
+    *ngIf="auth.allowed('users')"
+    [routerLink]="['/', 'users']"
+  >
+    <h3 class="item-name">Users</h3>
+  </mat-card>
+  <mat-card
+    fxLayout="column"
+    class="square-button"
+    matRipple
+    *ngIf="auth.allowed('products')"
+    [routerLink]="['/', 'header-footer']"
+  >
+    <h3 class="item-name">Header / Footer</h3>
   </mat-card>
 </div>
 <footer class="footer">