Data not displaying on load time in angular

In my project i am trying to display the users data in UI. But i am getting issues to display data

Here my users.json data

{
"success":true,


"summary":{
"total_registrations":100,
"verified":30,
"pending_verifications":20,
"profile_complete":20,
"profile_pending":10,
"mw_verified":10,
"mw_pending":10
},


"data":[
    {
    "user_id":1,
    
    "user_first_name":"Peter",
    "user_last_name":"Parker",
    "user_age":"25",
    "user_gender":"M",
    "user_city":"Nasik",
    "user_religion":"Hindu",
    "user_caste":"Hindu",
    "user_profession":"Self Employed",
    "mw_notes":"mw_notes",
    "user_package":"PLT",
    "user_profiles_allocated":"0",
    "mw_representative":"",
    "user_photo":"male.jpg"
},
{
    "user_id":2,
    
    "user_first_name":"Peter",
    "user_last_name":"Parker",
    "user_age":"25",
    "user_gender":"M",
    "user_city":"Nasik",
    "user_religion":"Hindu",
    "user_caste":"Hindu",
    "user_profession":"Self Employed",
    "mw_notes":"mw_notes",
    "user_package":"PLT",
    "user_profiles_allocated":"0",
    "mw_representative":"",
    "user_photo":"male.jpg"
},
{  "user_id":3,
    
    "user_first_name":"Peter",
    "user_last_name":"Parker",
    "user_age":"25",
    "user_gender":"M",
    "user_city":"Nasik",
    "user_religion":"Hindu",
    "user_caste":"Hindu",
    "user_profession":"Self Employed",
    "mw_notes":"mw_notes",
    "user_package":"PLT",
    "user_profiles_allocated":"0",
    "mw_representative":"",
    "user_photo":"male.jpg"
}




]

}

service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class UserService {

  constructor(private http:HttpClient) { }

  getAllUsers(){
    return this.http.get<any>('assets/users.json')
  }
}

component.ts

import { Table } from 'primeng/table';
import { Component, OnInit, ViewChild } from '@angular/core';
import { UserService } from '../../services/user.service';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {
  @ViewChild('dt') table: Table;

  allUsers:any = [];

  summary: any = {};

  
  constructor(private _userSerivce: UserService) { }
  
  ngOnInit():void {

   this._userSerivce.getAllUsers().subscribe(
      result => {
        this.summary = result.summary;
        this.allUsers = result.data;
        console.log(result.summary);
      }
    )
  }




}

component.html

 
    <div class="row">
        <table class="table">
            <tr>
                <th> Id </th>
                <th> Name </th>
                <th> Gender </th>
            </tr>
            <tr *ngFor="let user of allUsers">
                <td> {{user.user_id}} </td>
                <td> {{user.user_first_name}} </td>
                <td> {{user.user_gender}} </td>
            </tr>
        </table>
    </div>
    <div class="row">
        Total Registration : {{summary.total_registrations}}
    </div>
       
</div> 

when i am running this project on browser all data are successfully displayed in the console but it’s not display in UI window but if i click anywhere in window then data display successfully.. i don’t know what’s happening there

Here my routing module

 
const routes: Routes = [
  {
    path: '',
    component: LayoutComponent,
    children: [
      {
        path: 'dashboard',
       component: DashboardComponent
      },
      {
        path: 'subscription-packages',
        component: SubscriptionPackagesComponent
      },
      {
        path: 'coupon',
        component: CouponCodeComponent
      },
      {
        path:'user-details',
        component: UserDetailsComponent
      },
      {
        path: '',
        redirectTo: 'dashboard',
        pathMatch: 'full',
      },
      {
        path: '**',
        redirectTo: 'errors/404',
        pathMatch: 'full',
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class PagesRoutingModule {}

other component’s are working properly only dashboard component are run like this.
I hope you all expert understand my question. 🙂

Source: Angular Questions