动态更改 ngx-datatable-column 名称

Question

I'm using a component ngx-datatable angular version 9. I'm trying change the props name dynamically 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 name2 are in the pt.json . And the id is the [rows]="list" attribute. Of course doesn't work. Does anyone have any idea how to change the ngx-datatable-column props name dynamically?

Answer 1

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.