angularangular-materialngrxangular9ngx-datatable

ngx-datatable disable or enable the checkbox dynamically


I'm using a component ngx-datatable angular version 9. This component has the props [checkboxable]="true" to control the checkbox visibilit.

Problem: I need to control this props dynamicatly, like [checkboxable]=value. The "value" is a variable in component's TS. However I couldn't.

Does anyone have any idea how to control it?

Componet HTML:

<ngx-datatable 
  class='material tableFix'
  [rows]='rows' 
  [columnMode]='"force"' 
  [headerHeight]="'auto'"
  [footerHeight]='50' 
  [externalPaging]="true" 
  [messages]="messageTable"
  [loadingIndicator]="loadingIndicator"
  [count]="pagination && pagination.total_record" 
  [offset]="pagination && pagination.page_number"
  [limit]="pagination && pagination.page_size"
  [rowHeight]="'auto'"
  [scrollbarH]="false"
  [selected]="selected"
  [selectionType]="'checkbox'"
  [displayCheck]="displayCheck"
  (page)="loadPagination($event)"
  (sort)="loadSort($event)">
  
  <ngx-datatable-column
    [width]="40"
    [sortable]="false"
    [draggable]="false"
    [resizeable]="false"
    [canAutoResize]="false"
    [headerCheckboxable]="true"
    [checkboxable]="true" headerClass="text-center" cellClass="text-center">
  </ngx-datatable-column>

Solution

  • In TS file you have to declare a variable like value;

    value = true;

    In HTML

    Use [(checkboxable)] = "value" instead of [checkboxable]="true"

    Best regard!