ngx-datatable-column *ngIf="prop.visible" does not hide the column #5674

4 Answer(s)

• 

  0

  Anjali_Musmade created 8 months ago

  Support Team Support Team Member

  Hello fernando.guilherme,

  I am trying to reproduce the issue. I am unable to reproduce. Could you please share steps to reproduce or give some snippet of html code and ts code of that particular condition?

  If you are using ngx-datatable-column in a loop then please check the following links Demo - http://swimlane.github.io/ngx-datatable/#toggle Source code - https://github.com/swimlane/ngx-datatable/blob/master/src/app/columns/column-toggle.component.ts let me know if this help you.

  Thanks, Anjali

  Save Cancel
• 

  0

  fernando.guilherme created 8 months ago

  Hi,

  Let's use the users screen as an example.

  In the default-users-entity-props.ts class I set the following surname property to visible false when tenant.

  { type: ePropType.String, name: 'surname', displayName: 'AbpIdentity::Surname', sortable: true, columnWidth: 250, visible: data => Boolean(!data.record.tenantId), }

  In the Html of the extensible-table, where I displayed the column name I put a *ngIf="prop.visible"

  <ng-container ngFor="let prop of propList; let i = index; trackBy: trackByFn"> <ngx-datatable-column [width]="columnWidths[i + 1] || 200" [name]="prop.displayName | abpLocalization" [prop]="prop.name" [sortable]="prop.sortable" ngIf="prop.visible">

     <ng-template let-row="row" let-i="index" ngx-datatable-cell-template>
       <ng-container *abpPermission="prop.permission; runChangeDetection: false">
         <ng-container *ngIf="row['_' + prop.name]?.visible">
           <div *ngIf="!row['_' + prop.name].component; else component"
             [innerHTML]="row['_' + prop.name]?.value | async"
             (click)="prop.action && prop.action({ getInjected: getInjected, record: row, index: i })"
             [ngClass]="entityPropTypeClasses[prop.type]"
             [class.pointer]="prop.action">
           </div>
         </ng-container>
         <ng-template #component>
           <ng-container *ngComponentOutlet="row['_' + prop.name].component; injector: row['_' + prop.name].injector">
           </ng-container>
         </ng-template>
       </ng-container>
     </ng-template>
   </ngx-datatable-column>
  

  </ng-container>

  If you set the value of prop.visible to print, you will notice that it is returning like this: _ => true instead of true and when it is false, print all the code that is inside the visible

  Save Cancel
• 

  0

  Anjali_Musmade created 8 months ago

  Support Team Support Team Member

  Hello fernando.guilherme,

  Please try to add this -

  <ngx-datatable-column [name]="prop.displayName" *ngIf="checkIf(data)">

  data = {
      record: {
        tenantId: null // or any other value
      }
    };
  isVisible = data => Boolean(!data.record.tenantId);
    
  checkIf(data) {
    console.log(this.isVisible(data));
  }
  

  Do we have the data which we can pass in if condition then in checkIf method we can call isVisible which we declared at the top for time being. We don't have data so we added statically which is returning us Boolean value. So if you are able to pass the data property in if condition you will get the Boolean value.

  Please do let us know if this solution has worked for you?

  Thank You, Anjali

  Save Cancel
• 

  0

  mahmut.gundogdu created 8 months ago

  visible is a function not a value. the code must be

  before

     <ng-container *ngIf="row['_' + prop.name]?.visible">
  

  after

  <ng-container *ngIf="row['' + prop.name]?.visible && row['' + prop.name].visible()">

  like that

  Save Cancel