src/app/pages/contacts/contacts-list/contacts-list.component.html

<app-card-layout>
  <div header>
    <span>{{ 'Contacts.Title' | translate }}</span>
  </div>
  <div class="contacts-grid-wrapper" body>

    <div class="diverse-options">
      <div class="filtering diverse-options-item">
        <div class="filter-options">
          <span>{{ 'Filtering' | translate }}: </span>
          <input type="text" class="item" id="searchText" [(ngModel)]="contactsSandbox.modifyContacts.searchText" (change)="contactsSandbox.filterEvent()" size="20">

          <select [required]="false" type="text" class="form-control" [(ngModel)]="contactsSandbox.modifyContacts.personTypeId" (change)="contactsSandbox.filterEvent()">
            <option value="" disabled selected>{{ 'Contacts.PersonTypes' | translate }}</option>
            <option value="2eb4885e-7363-4918-90ed-b7d5d84cfd3f">{{ 'Contacts.InvoiceRecipient' | translate }}</option>
            <option value="a7522c72-14d0-4e9d-afe3-bfcb3ffbec10">{{ 'Contacts.ExecutiveDirector' | translate }}</option>
            <option value="47ce68b7-6d44-453e-b421-19020fd791b5">{{ 'Contacts.Lawyer' | translate }}</option>
            <option value="">{{ 'Contacts.AllPersonTypes' | translate }}</option>
          </select>
        </div>
      </div>
      
      <div class="sorting-options diverse-options-item">
        <span class="item">{{ 'Sorting' | translate }}: </span>

        <select [required]="false" type="text" class="form-control"  [(ngModel)]="contactsSandbox.contactProperty" (change)="contactsSandbox.sortEvent()">
          <option value="" disabled selected>{{ 'Column' | translate }}</option>
          <option value="name">{{ 'Contacts.Name' | translate }}</option>
          <option value="contactType">{{ 'Contacts.ContactType' | translate }}</option>
          <option value="note">{{ 'Contacts.Note' | translate }}</option>
          <option value="street">{{ 'Contacts.Street' | translate }}</option>
          <option value="community">{{ 'Contacts.Community' | translate }}</option>
          <option value="department">{{ 'Contacts.Department' | translate }}</option>
          <option value="">{{ 'NoSorting' | translate }}</option>
        </select>

        <select [required]="false" type="text" class="form-control"  [(ngModel)]="contactsSandbox.sortingStatus" (change)="contactsSandbox.sortEvent()">
          <option value="asc" selected>{{ 'Ascending' | translate }}</option>
          <option value="desc">{{ 'Descending' | translate }}</option>
        </select>
      </div>

      <div class="selectTypeOfNewContact">
        <select [required]="false" type="text" class="form-control" (change)="navigateTo($event.target.value)">
          <option value="" disabled selected>{{ 'Contacts.CreateNewContact' | translate }}</option>
          <option value="/new_intern_contact">{{ 'Contacts.InternalContact' | translate }}</option>
          <option value="/new_extern_contact">{{ 'Contacts.ExternalContact' | translate }}</option>
          <option value="/new_company">{{ 'Contacts.Company' | translate }}</option>
        </select>
      </div>
    </div>

    <ag-grid-angular
      [serverside]="contactsSandbox.serversideModel"
      [queryParameter]="contactsSandbox.modifyContacts"
      autoresizecolumns
      class="ag-theme-balham"
      [gridOptions]="gridOptions"
      [columnDefs]="columnDefinition"
      [rowSelection]="'single'"
      [frameworkComponents]="frameworkComponents"
      (gridReady)="onGridReady($event)"
    >
    </ag-grid-angular>
    <app-spinner [isRunning]="contactsSandbox.contactsLoading$ | async"></app-spinner>
  </div>
</app-card-layout>