Pipe Translater in Html Element

So, dont know if anyone can help me. I have the below line of code in html :

<ion-item class="item-style">
  <ion-label>{{ 'SettingsPage.ChangeLanguage' | translate }}</ion-label>
  <ion-select [(ngModel)]="language" (ionChange)="onLanguageChange();" cancelText={{cancelText}} okText={{okText}}>
    <ion-select-option value="en">{{ 'SettingsPage.English' | translate }}</ion-select-option>
    <ion-select-option value="mt">{{ 'SettingsPage.Maltese' | translate }}</ion-select-option>
  </ion-select>
</ion-item>

and the following methods in the .ts :

 onLanguageChange() {
this.translate.use(this.language);
console.log(this.language);
this.globalVariableService.languageChanged = true;
this.globalVariableService.setCurrentLanguage(this.language);
this.storage.set('Language', this.language).then(() => {
  this.sectorDataServiceProvider.populateSectorData().then(data => {
    console.log('this.sectorInfo ', this.sectorDataServiceProvider.sectorInfo);
  });
});
this.setOkAndCancelText();

}

setOkAndCancelText() {
    if (this.language === 'en') {
      this.cancelText = 'Cancel';
      this.okText = 'OK';
    } else if (this.language === 'mt') {
      this.cancelText = 'Le';
      this.okText = 'Iva';
    }
  }

I wish to remove the s setOkAndCancelText() which is being used to fill the cancelText={{cancelText}} parameter when the language changes within the app, and have something similar to:

<p [innerHTML]="'TermsOfUsePage.Header' | translate"></p>

Any ideas how i can make this possible please?