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-btn">
      <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.InternContact' | translate }}</option>
          <option value="/new_extern_contact">{{ 'Contacts.ExternContact' | translate }}</option>
          <option value="/new_company">{{ 'Contacts.Company' | translate }}</option>
        </select>
      </div>
    </div>

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