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>
    } 
}