<div dir="ltr">
  <button mat-button color="primary" (click)="edit()">
    <mat-icon>add</mat-icon>
  </button>
  <button mat-button [matMenuTriggerFor]="menu">  <mat-icon>more_vert</mat-icon>
  </button>
  <mat-menu #menu="matMenu">
    <button (click)='toggle(column)' *ngFor="let column of allColumns"  mat-menu-item>
      <input
              type='checkbox'
              [id]="column.prop"

              [checked]='isChecked(column)'
              [disabled]="(column.prop == 'id')"
      />
      {{column.name}}

    </button>
  </mat-menu>
</div>
<ngx-datatable
  class="material"
  [rows]="rows"
  [columns]="columns"
  [columnMode]="'force'"
  [headerHeight]="30"
  [footerHeight]="50"
  [rowHeight]="30"
  [limit]="limit"
  [count]="count"
  [offset]="offset"
  [filterRow]="true"
  [externalSorting]="true"
  [loadingIndicator]="is_loading"
  [externalPaging]="true"
  (sort)="fetchList($event)"
  (page)='fetchList($event)'
  [appUrl] = "appUrl"
  [filters] = "filters"
  [sortDir]="sortDir"
  [sortProp]="sortProp"
  [includes]="includes"
  [resource] = 'listService.type'

>


  <ngx-datatable-column  *ngFor="let column of columns" prop="{{column.prop}}" name="{{column.name}}" [filterTemplate]="column.filter">
    <ng-template *ngIf="column.prop == 'id'" let-row="row" let-value="value" ngx-datatable-cell-template>
      <button mat-button color="primary" (click)="remove(value)"><mat-icon svgIcon="delete"></mat-icon></button>
      <button mat-button color="primary" (click)="edit(value)">
        <mat-icon>edit</mat-icon>
      </button>
    </ng-template>
  </ngx-datatable-column>


</ngx-datatable>


<ng-template #filter_name>
  <mat-form-field>
    <input matInput [(ngModel)]="filters['name']" (change)="fetchList('filter')">
  </mat-form-field>
</ng-template>

<ng-template #filter_slug>
  <mat-form-field style="width: 100%" floatLabel="never">
    <input matInput [(ngModel)]="filters['slug']" (change)="fetchList('filter')">
  </mat-form-field>
</ng-template>

  <ng-template #filter_id>
    <button mat-icon-button (click)="fetchList('refresh')">
      <mat-icon svgIcon="refresh"></mat-icon>
    </button>
  </ng-template>




