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'},
        ];
    }
}

Answer 1

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
  }
}