angularpipeangular-translate

Angular, How do not use translate pipe in some situations


In mat-table I have API for getting column names, aligns and etc. After getting column names from backend, I put column name in translate pipe for internationalization.

But, I do not want to use internationalization in some column names. Is it possible put exception or some tricks do that?

Code in :

<ng-container *ngIf="tableColumn.ordType !== 'no'; else notSortable">
  <th mat-header-cell *matHeaderCellDef [mat-sort-header]="tableColumn.name"
      [arrowPosition]="tableColumn.align === 'right' ? 'before' : 'after'"
      [class.text-right]="tableColumn.align === 'right'"
      [class.text-left]="tableColumn.align === 'left'"
      [class.text-center]="tableColumn.align === 'center'"
      [style.width.px]="tableColumn.width">
            
**      {{'grid.' + tableColumn.label | translate}}**
            
  </th>
</ng-container>

API from backend (I am using label for internationalization and put in translate pipe):

{
      "name": "status112_saldo",
**      "label": "grid.judical.status112_saldo",**
      "grid": true,
      "num": "d13",
      "align": "left",
      "ordType": "",
      "width": "350",
      "col_type": "sum",
      "excel": true
    }

For example I have this label for status saldo

"grid.judical.status112_saldo":

But when I put single word in this label "status saldo" I am getting:

grid.status saldo


Solution

  • Work with ngIfElse directive. So you can define the constraint that which value should use the template with the translate pipe or not.

    If the condition matches, use the existing template with the translate pipe. Else, use the template without the translate pipe.

    <th mat-header-cell
      ...
    >
      <ng-container *ngIf="!notTranslateLabels.includes(tableColumn.label) else noTranslateTemplate">
          {{ 'grid.' + tableColumn.label | translate }}
      </ng-container>
      <ng-template #noTranslateTemplate>
        {{ tableColumn.label }}
      </ng-template>
    </th>
    

    In the component, you define an array to store the value for the label(s) which don't not apply the translate pipe.

    notTranslateLabels: string[] = [/* Define the label not to be translated */];