angular-ngrx-pattern/src/app/pages/users-manager/users-management/users-management.component....

<div class="p-4">
  <app-user-nav-bar></app-user-nav-bar>

  <ng-container *ngIf="userState$ | async as userState" [ngSwitch]="userState.dataState">

    <ng-container *ngSwitchCase="userStateEnum.INIT_STATE">
      <div class="p-2">initial state</div>
    </ng-container>

    <ng-container *ngSwitchCase="userStateEnum.LOADING">
      <div class="p-2">Data are looding ...</div>
    </ng-container>

    <ng-container *ngSwitchCase="userStateEnum.ERROR">
      <div class="p-2 text-danger"> {{userState.serverErrorMsg}} </div>
    </ng-container>

    <ng-container *ngSwitchCase="userStateEnum.LOADED">
      <app-users-list [inputState]="userState"></app-users-list>
    </ng-container>

  </ng-container>

</div>