users-list.component.html

<ion-header [translucent]="true">
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>{{'lang.administration' | translate}} {{'lang.manage_usersAlt' | translate}}</ion-title>
  </ion-toolbar>
  <ion-toolbar  color="primary">
    <ion-buttons slot="start">
      <ion-button fill="outline"  shape="round" routerLink="/administration/users/new">
        {{'lang.userCreation' | translate}}
      </ion-button>
    </ion-buttons>
    <ion-title slot="end" color="secondary">{{userList.length}} {{'lang.manage_usersAlt' | translate}}</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content #mainContent>
  <ion-list>
    <ion-item style="display: flex;">
      <!--<ion-checkbox slot="start"></ion-checkbox>-->
      <ion-label color="primary" matSort [matSortActive]="displayedColumns[1]" matSortDirection='asc' style="display: flex;font-size: 12px;align-items: center;" (matSortChange)="sortData($event)">
        <ng-container *ngFor="let col of displayedColumns">
          <div [mat-sort-header]="col" disableClear style="flex: 1" *ngIf="col!=='actions'">
            {{'lang.' + col | translate}}
          </div>
        </ng-container>
        <div style="flex: 1" *ngIf="displayedColumns.indexOf('actions') > -1">
          <ion-searchbar [placeholder] = "'lang.filter' | translate" style="padding: 1px;" (ionChange)="applyFilter($event.detail.value)"></ion-searchbar>
        </div>
      </ion-label>
      <ion-button slot="end" fill="clear" shape="round" disabled>
        <ion-icon></ion-icon>
      </ion-button>
    </ion-item>
    <ion-virtual-scroll [items]="sortedData" approxItemHeight="50px">
      <ion-item *virtualItem="let element" style="display: flex;">
        <!--<ion-checkbox slot="start"></ion-checkbox>-->
        <ion-label style="display: flex;cursor: pointer;" routerLink="/administration/users/{{element.id}}">
          <div style="flex: 1" *ngFor="let col of displayedColumns">
            {{element[col]}}
          </div>
        </ion-label>
        <ion-button slot="end" fill="clear" shape="round" [disabled]="element.id === authService.user.id" (click)="$event.stopPropagation();delete(element)" title="{{'lang.delete' | translate}}">
          <ion-icon color="danger" slot="icon-only" name="trash"></ion-icon>
        </ion-button>
      </ion-item>
    </ion-virtual-scroll>
  </ion-list>
</ion-content>