grupo-local-atendimento.component.html

<div class="d-flex justify-content-between col-sm-12 p-2">
  <button mat-flat-button color="primary" class="col-sm-2 col-md-2 col-lg-2 float-start btn-primary" data-bs-toggle="collapse" data-bs-target="#collapseSearch"
    aria-expanded="false" aria-controls="collapseSearch">
    <mat-icon>search</mat-icon>
    Buscar
  </button>

  <button appDebounceClick mat-flat-button color="primary" class="col-sm-1 col-md-1 col-lg-1 float-end btn-primary" data-bs-toggle="collapse" data-bs-target="#collapseForm"
    aria-expanded="false" aria-controls="collapseForm" (click)="new();" *ngIf="!onCreate && !onEdit">
    <mat-icon>add</mat-icon>
    Novo
  </button>
</div>

<div class="mat-elevation-z4">
  <div class="collapse" id="collapseSearch">
    <div class="card card-body">
      <div class="row">
        <div class="mb-3 col-md-3 row">
          <mat-form-field appearance="fill">
            <mat-label>Nome:</mat-label>
            <input matInput #nome maxlength="100"
            title="Filtre por nome"
              (input)="search('nome', nome.value)"
            >
          </mat-form-field>
        </div>
      </div>
    </div>
  </div>

  <div class="">
    <div *ngIf="onCreate || onEdit">
      <form #formCreateGrupoLocalAtendimento="ngForm" class="justify-content-md-center">

        <mat-form-field appearance="fill" class="col-lg-6 col-md-6 p-2">
          <mat-label>Nome:</mat-label>
          <input
            type="text"
            aria-label="nome"
            id="nome"
            required
            matInput
            maxlength="50"
            name="nome"
            [(ngModel)]="currentRecord.nome"
            #nome="ngModel"
          >
          <mat-error *ngIf="nome.invalid && (nome.dirty || nome.touched)">
            <span *ngIf="nome.errors?.['required']">
              O campo é obrigatório!
            </span>
          </mat-error>
        </mat-form-field>

        <div class="col-md-12 d-flex justify-content-end p-2">
          <button mat-button type="submit"
          (click)="addGridData()" *ngIf="onCreate"
            [disabled]="formCreateGrupoLocalAtendimento.invalid">Inserir</button>
          <button mat-button type="submit"
          (click)="updateGridData()"
           *ngIf="onEdit">Alterar</button>
          <button mat-button color="warn" type="button"
          (click)="cancelar()">Cancelar</button>
        </div>
      </form>
    </div>
  </div>
</div>

<div class="mat-elevation-z4">
  <table
    mat-table
    [dataSource]="datasource"
    matSort
    matSortActive="id"
    matSortDirection="desc"
    matSortDisableClear
  >

    <!-- Nome Column -->
    <ng-container matColumnDef="nome" class="col-2">
      <th mat-header-cell *matHeaderCellDef mat-sort-header="nome">Nome</th>
      <td mat-cell *matCellDef="let row">{{ row?.nome }}</td>
    </ng-container>

    <!-- action Column -->
    <ng-container matColumnDef="action" class="col-1">
      <th mat-header-cell *matHeaderCellDef> Ações </th>
      <td mat-cell *matCellDef="let row; index as position">
        <div class="row">

          <div class="col-1 me-3">
            <button mat-icon-button *ngIf="!onEdit" (click)="atualizar(row)">
              <mat-icon class="edit text-success">edit</mat-icon>
            </button>
          </div>

          <div class="col-1 me-3">
            <button class="delete" mat-icon-button *ngIf="!onEdit" (click)="deleteGridData(row.id)">
              <mat-icon class="delete text-danger">delete</mat-icon>
            </button>
          </div>

          <ng-template #deleteDialog>
            <mat-dialog-content class="mat-typography">
              Deseja apagar esse registro?
            </mat-dialog-content>
            <mat-dialog-actions align="end">
              <button mat-button mat-dialog-close>Cancel</button>
              <button mat-button [mat-dialog-close]="true">Apagar</button>
            </mat-dialog-actions>
          </ng-template>
        </div>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
  </table>
  <mat-paginator
    [length]="this.totalCount"
    [pageSize]="5"
    [pageSizeOptions]="[5, 10, 20, 50]">
  </mat-paginator>
</div>