jaminan new material angular

<section id="sample-table" class="mat-elevation-z8 bg-white">
  <mat-card fxFlex.gt-xs="40" class="mb15">
  <div fxLayout="row wrap" fxLayout.lt-sm="column" fxLayoutAlign="space-around stretch" [formGroup]="ShiftForm">
      <div fxLayout="row wrap" fxLayout.lt-sm="column" fxLayoutGap.lt-sm="0">

      <mat-form-field appearance="outline" class="flex-auto ">
        <mat-label>Tanggal Awal</mat-label>
        <!-- <input matInput [matDatepicker]="tglMulaiDepan" placeholder="Masukkan Tanggal" [(ngModel)]="tglMulaiDepan">
        <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
        <mat-datepicker #picker1></mat-datepicker> -->

        <input matInput [matDatepicker]="picker1" placeholder="Start Date" [formControl]="startDate">
        <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
        <mat-datepicker #picker1></mat-datepicker>


      </mat-form-field>
        <mat-form-field appearance="outline" class="flex-auto" style="margin-left:10px">
            <mat-label>Tanggal Akhir</mat-label>
            <input matInput [matDatepicker]="picker2" placeholder="End Date"
            [min]="startDate.value" [formControl]="endDate">
           <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
           <mat-datepicker #picker2></mat-datepicker>

           <!-- <input matInput [matDatepicker]="tglAkhirDepan" placeholder="Masukkan Tanggal" [(ngModel)]="tglAkhirDepan">
           <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
           <mat-datepicker #picker2></mat-datepicker> -->

        </mat-form-field>

      <div class="col-span-6 sm:col-span-3 block">
        <mat-label class="mr15">Tampilkan Data</mat-label>

        <mat-form-field appearance="outline">
          <mat-select (change)="selectTampilakanData($event)"   [(ngModel)]="size"
          name="size">
           <mat-option  value="20">20</mat-option>
           <mat-option  value="100">100</mat-option>
           <mat-option  value="500">500</mat-option>
           <mat-option  value="1000">1000</mat-option>
          </mat-select>
      </mat-form-field>
      <button mat-raised-button  color="primary" (click)="btnFilter()" style="margin-left: 10px;">Filter</button>

      </div>
    </div>
  </div>

  <p-table
  [value]="tbls"
  [paginator]="true"
   [rows]="10"
    [showCurrentPageReport]="true" responsiveLayout="scroll"
    styleClass="p-datatable-md md-theme p-datatable-gridlines"
    #dt1
    dataKey="id"
    currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
    [rowsPerPageOptions]="[10,25,50]"
    [loading]="loadingPage"
    [globalFilterFields]="['nomorCovernote','idProposal','namaMitra','namaNotaris']" responsiveLayout="scroll">

       <!-- Global Filter User Input-->

       <ng-template pTemplate="caption">
        <div class="p-d-flex">
          <span class="p-input-icon-left p-ml-auto">
                    <i class="pi pi-search"></i>
                    <input pInputText type="text" (input)="dt1.filterGlobal($event.target.value, 'contains')" placeholder="Cari" />
                </span>
        </div>
      </ng-template>
      <ng-template pTemplate="header" let-columns>
          <tr>
              <th>Aksi</th>
              <th pSortableColumn="nomorCovernote">No. Covernote <p-sortIcon field="nomorCovernote"></p-sortIcon></th>
              <th pSortableColumn="idProposal">ID Proposal <p-sortIcon field="idProposal"></p-sortIcon></th>
              <th pSortableColumn="namaMitra">Nama Mitra <p-sortIcon field="namaMitra"></p-sortIcon></th>
              <th pSortableColumn="namaNotaris">Nama Notaris <p-sortIcon field="namaNotaris"></p-sortIcon></th>
              <th pSortableColumn="alamatNotaris">Alamat Notaris <p-sortIcon field="alamatNotaris"></p-sortIcon></th>
              <th pSortableColumn="noTelpNotaris">No. Telp Notaris <p-sortIcon field="noTelpNotaris"></p-sortIcon></th>
              <th pSortableColumn="tanggalJatuhTempo">Tgl Jatuh Tempo <p-sortIcon field="tanggalJatuhTempo"></p-sortIcon></th>
              <th pSortableColumn="overdue">Overdue <p-sortIcon field="overdue"></p-sortIcon></th>
              <th pSortableColumn="statusCovernote">Status<p-sortIcon field="statusCovernote"></p-sortIcon></th>


          </tr>
      </ng-template>
      <ng-template pTemplate="body" let-data let-rowIndex="rowIndex">
        <tr>
            <td style="width: 3rem">
              <button mat-icon-button type="button" class="cell-action" [matMenuTriggerFor]="actionsMenu"
                  [matMenuTriggerData]="{ id: data.id, bankId: data.bankId } ">
                  <mat-icon style="font-size:24px" [icIcon]="icMoreHoriz"></mat-icon>
              </button>
          </td>
            <td>{{data.nomorCovernote}}</td>
            <td><b>{{ data.idProposal }}</b> / {{ data.idTransaksi }}</td>
            <td>{{ data.namaMitra }}</td>
            <td>{{ data.namaNotaris }}</td>
            <td>{{ data.alamatNotaris }}</td>
            <td>{{data.noTelpNotaris}}</td>
            <td>  <div class="w-24">
              {{
                data.tanggalJatuhTempo  | date:'mediumDate'
              }}
            </div></td>
            <td> {{ data.overdue }} Hari</td>
            <td> {{ data.statusCovernote }}</td>
        </tr>
    </ng-template>
    <ng-template pTemplate="emptymessage">
      <tr>
          <td colspan="10" class="text-center">Data Not found.</td>
      </tr>
  </ng-template>
  </p-table>

  </mat-card>





</section>

<mat-menu #actionsMenu="matMenu" xPosition="before" yPosition="below">
  <ng-template let-customer="customer" let-id="id" let-bankId="bankId" matMenuContent>
      <button mat-menu-item (click)="dialogJumlahRekening(id)">
          <mat-icon [icIcon]="icEye"></mat-icon>
          <span>Detail Jaminan </span>
      </button>

      <!-- <button mat-menu-item (click)="detailDataBank(bankId)">
        <mat-icon [icIcon]="icFile"></mat-icon>
        <span>Catatan</span>
    </button> -->
  </ng-template>
</mat-menu>