Translate label of splitButton - PrimeNG

Question

I'm trying translate items from "p-splitButton" but i can't because the "items" is an object. How can i do it?

[model]="items | translate"

app.component.html

<p-splitButton
  label="Save"
  icon="pi pi-plus"
  (onClick)="save('info')"
  [model]="items | translate"
></p-splitButton>

app.component.ts

import { Component} from '@angular/core';
import {MenuItem} from 'primeng/api';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent { 
    items: MenuItem[];
    
    constructor() {}
    
    ngOnInit() {
        this.items = [
            {label: 'Example 1', icon: 'pi pi-info', url: 'http://angular.io'},
            {label: 'Example 2', icon: 'pi pi-info', url: 'http://angular.io'},
        ];
    }
}

Unfortunately, you can't do that with `translate` pipe because PrimeNg has not given a way to do this, But you can update the label key in `items` in your component whenever the translation change, I know that's ugly but I can only think of this or maybe you can create your custom component — Sameer, Nov 23 '22 at 17:34
Or you can create a new pipe called `translateArray` with your own logic :) — Sameer, Nov 23 '22 at 17:37

score 0 · Accepted Answer · answered Nov 23 '22 at 18:35

You can use an impure pipe so that changes in the object are detected and then translate the label and reassign the value this

@Pipe({
  name: 'translate',
  pure: false,
})
export class TranslatePipe implements PipeTransform {
  transform(value: MenuItem[]): any {
    value.forEach(val => val.label = translateFn(val.label))
    return value
  }
}

Translate label of splitButton - PrimeNG

1 Answers1