Country table.component.html

<form>
<div class="mb-3 row">
    <label
    for="table-complete-search"
    class="col-xs-3 col-sm-auto col-form-label"
    >Full text search:</label
    >
    <div class="col-xs-3 col-sm-auto">
    <input
        id="table-complete-search"
        type="text"
        class="form-control"
        name="searchTerm"
        [(ngModel)]="tableHelper.searchTerm"
    />
    </div>
    <span class="col col-form-label" *ngIf="tableHelper.loading$ | async"
    >Loading...</span
    >
</div>

<table class="table table-striped">
    <thead>
    <tr>
        <th sortable="name.common" scope="col" (sort)="onSort($event)">
        Country
        </th>
        <th sortable="region" scope="col" (sort)="onSort($event)">Region</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let country of countries$ | async">
        <td>
        <ngb-highlight
            [result]="country.name.common"
            [term]="tableHelper.searchTerm"
        ></ngb-highlight>
        </td>
        <td>
        <ngb-highlight
            [result]="country.region"
            [term]="tableHelper.searchTerm"
        ></ngb-highlight>
        </td>
    </tr>
    </tbody>
</table>

<div class="d-flex justify-content-between p-2">
    <ngb-pagination
    [collectionSize]="(total$ | async)!"
    [(page)]="tableHelper!.page"
    [pageSize]="tableHelper!.pageSize"
    >
    </ngb-pagination>

    <select
    class="form-select"
    style="width: auto"
    name="pageSize"
    [(ngModel)]="tableHelper!.pageSize"
    >
    <option [ngValue]="2">2 items per page</option>
    <option [ngValue]="4">4 items per page</option>
    <option [ngValue]="6">6 items per page</option>
    </select>
</div>
</form>