Table example.component.html
<mat-form-field class="example-form-field" appearance="fill">
<mat-label>Search all GitHub Repositories</mat-label>
<input matInput type="text" [(ngModel)]="query" (keydown.enter)="search()" />
<button matSuffix mat-icon-button aria-label="Clear" (click)="search()">
<mat-icon>search</mat-icon>
</button>
</mat-form-field>
@switch(loading) {
<!-- Show Loading Spinner -->
@case(true) {
<mat-spinner
[style.position]="'absolute'"
[style.top]="'50%'"
[style.left]="'50%'"
></mat-spinner>
}
<!-- Show Table -->
@case(false) {
<div class="table-container">
<table
mat-table
[dataSource]="searchResult.items"
class="mat-elevation-z8 demo-table">
@for (column of columns; track column) {
<ng-container [matColumnDef]="column.columnDef">
<th mat-header-cell *matHeaderCellDef>
{{ column.header }}
</th>
<td mat-cell *matCellDef="let row">
{{ column.cell(row) }}
</td>
</ng-container>
}
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
</div>
}
}