angular-datatables 1619

diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
index f2a23d8..0dc43ab 100644
--- a/src/app/dashboard/dashboard.component.html
+++ b/src/app/dashboard/dashboard.component.html
@@ -1,15 +1,15 @@
-<div class="container" style="padding:10px;" *ngIf="!loading">
+<div class="container" style="padding:10px;" [hidden]="loading">

     <!--Overview with dropdown filters-->
     <div class="row" style="padding: 10px;">
-
+

             <div class="col-md" style="padding: 10px;">
-
+
                   <button class="btn btn-primary" (click)="openModal()">Select Date Range</button>
             </div>
-
-
+
+
     </div>

     <div class="row text-center" style="padding: 10px; margin-top: 10px; margin-bottom: 10px;">
@@ -33,8 +33,8 @@
         </div>
     </div>

-
-    <div class="row" style="padding: 10px; margin-top: 10px; margin-bottom: 10px;">
+
+    <div class="row" style="padding: 10px; margin-top: 10px; margin-bottom: 10px;">
         <table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover">
             <thead>
                 <tr>
@@ -67,7 +67,7 @@

 </div>

-<div *ngIf="loading" class="text-center" style="padding: 10px">
+<div [hidden]="!loading" class="text-center" style="padding: 10px">
     <div class="spinner-border text-warning" role="status">
         <span class="visually-hidden">Loading...</span>
     </div>
@@ -99,7 +99,7 @@
                 <label class="form-label" for="enddate"> Select End Date</label>
                 <mdb-date-picker formControlName="EndDate" name="enddate" [options]="myDatePickerOptions" [placeholder]="'Select End Date'" required></mdb-date-picker>
             </div>
-
+
         </form>
       </div>
       <div class="modal-footer">
diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts
index 9bedf31..fba065e 100644
--- a/src/app/dashboard/dashboard.component.ts
+++ b/src/app/dashboard/dashboard.component.ts
@@ -29,13 +29,13 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
   loading = false;


-  /*** Data varibales ***/
+  /*** Data varibales ***/
   completed_bookings= 0;
   upcoming_bookings= 0;
   total_revenue= 0;
   total_bookings= 0;

-
+
   //Booking Table
   booking_table: Array<any> = [];

@@ -53,7 +53,7 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {

         this.loading = false

-
+
         //Bookings Overview data
         this.completed_bookings = data.result.completed_bookings
         this.total_bookings = data.result.total_number_of_bookings
@@ -76,7 +76,6 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
   }

   ngAfterViewInit(): void {
-    this.dtTrigger.next();
   }

   ngOnDestroy(): void{
@@ -113,7 +112,7 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
     })
   }

-
+
   //Get All-Time Dashboard Data
   getAllData(){

@@ -123,16 +122,16 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {

         this.loading = false

-
+
         //Bookings Overview data
         this.completed_bookings = data.result.completed_bookings
         this.total_bookings = data.result.total_number_of_bookings
         this.total_revenue = data.result.total_revenue
         this.upcoming_bookings = data.result.upcoming_bookings

-
-        setTimeout(() => {
+
         this.booking_table = data.result.booking_table;
+        setTimeout(() => {
         this.dtTrigger.next();
         }, 1000);

@@ -176,7 +175,7 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
         console.log(error)
       }

-    );
+    );


   }
@@ -199,14 +198,14 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
       //Bookings per City Data
       this.bookings_per_city =[
         {data: data.result.percentage_of_bookings_per_city_dataset.data, label:"Percentage of bookings per city"}
-      ]
+      ]
       this.bookings_per_city_labels = data.result.percentage_of_bookings_per_city_labels;
       this.generateColors(this.bookings_per_city_labels);

       //Bookings per Venue Data
       this.bookings_per_venue =[
         {data: data.result.percentage_of_bookings_per_venue_dataset.data, label:"Percentage of bookings per venue"}
-      ]
+      ]
       this.bookings_per_venue_labels = data.result.percentage_of_bookings_per_venue_labels;
       this.generateColors(this.bookings_per_venue_labels);

@@ -236,5 +235,5 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
       this.dtTrigger.next();
     });
   }
-
+
 }