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 ?
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.