angularangularjsangular-materialngx-datatable

Change the ngx-datatable-column name dynamically


I'm using a component ngx-datatable angular version 9. I'm trying change the props namedynamically using a *ngIf command.

Problem: I want to using a attribute the list to show the right name.

Code:

    <ngx-datatable-column *ngIf="id == 0 "
      [cellClass]="'alinha-centralizado-global'"
      [headerClass]="'alinha-centralizado-global'"
      name="{{ 'name1' | translate }}"
      prop="fullName"
      [flexGrow]="2"
    >
   <ngx-datatable-column *ngIf="id == 1 "
      [cellClass]="'alinha-centralizado-global'"
      [headerClass]="'alinha-centralizado-global'"
      name="{{ 'name2' | translate }}"
      prop="fullName"
      [flexGrow]="2"
    > 
      <ng-template let-value="value" ngx-datatable-cell-template>
        <span title="{{ value }}">
          {{ value | fullName }}
        </span>
      </ng-template>
    </ngx-datatable-column>

The name1 and name2are in the pt.json. And the idis the [rows]="list" attribute. Of course doesn't work. Does anyone have any idea how to change the ngx-datatable-column props name dynamically ?


Solution

  • It's a beginner question. The correct way to do show the props's ngx-datatable-column name is to with in the .html file write like this:

      <ngx-datatable-column 
          [cellClass]="'alinha-centralizado-global'"
          [headerClass]="'alinha-centralizado-global'"
          prop="fullName"
          [flexGrow]="2"
        >
          <ng-template ngx-datatable-header-template>
              <span>{{ getName() }}</span>
          </ng-template>
          <ng-template let-value="value" ngx-datatable-cell-template>
            <span title="{{ value }}">
              {{ value | fullName }}
            </span>
          </ng-templa`enter code here`te>
        </ngx-datatable-column>`enter code here`
    

    And in the .ts file you create a method getName() with the condition to show name dinamicatilly.