Ng2-translate and ion-segment button


I’m using the ng2 translate tool.

It’s going OK, except now I’ve run into an issue with the ion-segment and its ion-segment-button.

It seems the translation is unable to happen to text inside the ion-segment-button.

Is there a way to have ng2-translate work in this scenario?

Mockup code below:

        <ion-segment [(ngModel)]="mainSegements">
            <ion-segment-button value="a">
                <span>{{ 'SOME_KEY.SUMMARY' | translate }}</span>
            <ion-segment-button value="b">
                {{ 'SOME_KEY.DETAILS' | translate }}
            <ion-segment-button value="c">
                {{ 'SOME_KEY.WHATEVER' | translate }}


Problem appears to be resolved by applying translate service in the .ts file.