imaq/angular/src/app/_components/paging/paging.component.html

<div class="spt-tools">
    <ng-container *ngIf="searchable">
        <div class="spt-form">
            <form [formGroup]="searchForm" class="position-relative">
                <div class="row">
                    <div class="col-12">
                        <input type="text" class="form-control" formControlName="inputText"
                               placeholder="{{'form.search_placeholder' | translate}}">
                        <span class="spt-clear" *ngIf="searchForm.get('inputText')?.value" (click)="clearForm()"></span>
                    </div>
                </div>
            </form>
        </div>
    </ng-container>

    <div *ngIf="displayOptionKeys.length > 1">
        <select [value]="selectedDisplayOption" (change)="onDisplayOptionChange($any($event.target).value)">
            <option *ngFor="let option of displayOptionKeys" [value]="option">
                {{displayOptions[option]}}
            </option>
        </select>
    </div>

    <div class="d-flex align-items-center flex-wrap">
        <mat-paginator *ngIf="dataLength > 0" class=""
                       [pageSizeOptions]="pageSizeOptions"
                       [length]="dataLength"
                       (page)="handlePageEvent($event)"
                       [pageSize]="pageSize"
                       [pageIndex]="pageIndex"
                       [hidePageSize]="hidePageSize"
                       showFirstLastButtons
        >
        </mat-paginator>
        <button type="button" class="btn btn-primary ms-3"
                (click)="getData()"><span class="bi bi-arrow-clockwise"></span>
        </button>
        <button *ngIf="showCreateDataButton" type="button" class="btn btn-primary ms-3"
                (click)="onCreateData()"><span class="bi bi-bookmark-plus"></span>
        </button>
    </div>
</div>
<ng-content></ng-content>
<div *ngIf="dataInitialized && dataLength <= 0" class="spt-no-entries">{{'form.no_data' | translate}}</div>
<div class="spt-tools single">
    <mat-paginator *ngIf="dataLength > 0" class=""
                   [pageSizeOptions]="pageSizeOptions"
                   [length]="dataLength"
                   (page)="handlePageEvent($event)"
                   [pageSize]="pageSize"
                   [pageIndex]="pageIndex"
                   [hidePageSize]="hidePageSize"
                   showFirstLastButtons>
    </mat-paginator>
</div>