angular-ngrx-pattern/src/app/pages/users-manager/users-management/user-s-projects/user-s-projects.component.html

<div class="container p-3">
  <ng-container
    *ngIf="usersState$ | async as userState"
    [ngSwitch]="userState.msgState"
  >
    <ng-container *ngSwitchCase="msgState.LOADING">
      {{ msgState.LOADING }}
    </ng-container>

    <ng-container *ngSwitchCase="msgState.ERR">
      {{ msgState.ERR }}
    </ng-container>

    <ng-container *ngSwitchCase="msgState.LOADED">
      <p-table
        [value]="userState.usersList"
        responsiveLayout="scroll"
        styleClass="p-datatable-striped"
        *ngIf="userState.usersList && userState.usersList.length > 0"
        [paginator]="true"
        [rows]="2"
        [showCurrentPageReport]="true"
        currentPageReportTemplate="{first} - {last} of {totalRecords} users"
        [rowsPerPageOptions]="[2, 3, 5]"
      >
        <ng-template pTemplate="header">
          <tr>
            <th>ID</th>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Projects involving user</th>
            <th>Email</th>
          </tr>
        </ng-template>
        <ng-template pTemplate="body" let-user>
          <tr>
            <td>{{ user.id }}</td>
            <td>{{ user.firstname }}</td>
            <td>{{ user.lastname }}</td>
            <td>
              <ul *ngFor="let project of user.projects">
                <li>
                  <span style="font-weight: bold"
                    >Project ID: {{ project.id }}</span
                  >
                </li>

                <li>Project Name: {{ project.projectName }}</li>
                <li>Priority: {{ project.priority }}</li>
                <li>Creation Date: {{ project.creationDate }}</li>
                <li>Company ID: {{ project.companyId }}</li>
                <li>Description: {{ project.description }}</li>
                <li>User ID: {{ project.userId }}</li>
                <li>Project State: {{ project.state }}</li>
              </ul>
            </td>

            <td>{{ user.email }}</td>
          </tr>
        </ng-template>
      </p-table>
    </ng-container>
  </ng-container>
</div>