projects-management-microservices-frontend/src/app/pages/project-manager/project-management/projects-list/projects-list.component.html

<span class="p-input-icon-right">
  <i class="pi pi-search"></i>
  <input
    type="text"
    class="form-control"
    pInputText
    [(ngModel)]="projectName"
    (ngModelChange)="onSearch1()"
    placeholder="search a project by name"
  />
</span> &nbsp;
<span class="p-input-icon-right">
  <i class="pi pi-search"></i>
  <input
    type="text"
    class="form-control"
    pInputText
    [(ngModel)]="userLastname"
    (ngModelChange)="onSearch2()"
    placeholder="projects of user lastname"
  />
</span>

  &nbsp;
<span class="p-input-icon-right">
  <i class="pi pi-search"></i>
  <input
    type="text"
    class="form-control"
    pInputText
    [(ngModel)]="companyName"
    (ngModelChange)="onSearch3()"
    placeholder="projects of company"
  />
</span>

<p-table
    [value]="inputProjectsList"
    responsiveLayout="scroll"
    *ngIf="inputProjectsList.length>0"
    styleClass="p-datatable-striped"
    [paginator]="true"
    [rows]="5"
    [showCurrentPageReport]="true"
    currentPageReportTemplate="{first} - {last} of {totalRecords} projects"
    [rowsPerPageOptions]="[5, 8, 10]"

  >
    <ng-template pTemplate="header">
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Priority</th>
        <th> Created Date</th>
        <th>Description</th>
        <th>state</th>
        <th>User assigned</th>
        <th>Company</th>
        <th>action1</th>
        <th>action2</th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-project>
      <tr>
        <td>{{ project.projectID }}</td>
        <td>{{ project.projectName }}</td>
        <td>{{ project.priority }}</td>
        <td>{{project.createdDate}}</td>
        <td>{{ project.description }}</td>
        <td>{{ project.state }}</td>
        <td>
          <ul>
            <li>{{ project.user.firstname}} {{ project.user.lastname}}</li>
            <li>{{ project.user.email}}</li>
            <li>{{ project.user.address.numHouse }} {{ project.user.address.streetName }}
            <li>{{ project.user.address.pb }} {{ project.user.address.city }}, {{ project.user.address.country }}</li>

          </ul>
        </td>
        <td>
          <ul>
            <li>{{project.company.companyName}}</li>
            <li>{{project.company.companyType}}</li>
          </ul>
        </td>
        <td>
          <button class="btn">
            <i class="fa fa-pencil" style="color:mediumturquoise" (click)="onEditProject(project)"></i>
          </button>
        </td>
        <td>
          <button class="btn">
            <i class="fa fa-trash" style="color:red" (click)="onProjectDelete(project)"></i>
          </button>
        </td>
      </tr>
    </ng-template>
  </p-table>