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>