如何使用管道有条件地显示innerHTML值

Question

I am using angular 8. Wanted to conditionally implement the innerHTML using pipe translate.

.html

<button type="button"     
    mat-flat-button
    // using translate module internally
   [innerHTML] = "display ? (HIDE_NUMBER' : SHOW_NUMBER) | translate)"
   (click)="toggle()">
</button>

.ts

//all imports are done

   export class New implements OnInit {

    public display: boolean;

    constructor() {}

    toggle() {
      this.display = !this.display;
    }

}

Answer 1

You have a strange ' after HIDE_NUMBER :) . But that's not the only problem

You need to do something like this

[innerHTML] = " (condition ? 'translate_string'
                   : 'the_other_translate_string'
                ) | translate
                "

The idea is to wrap the condition inside () and then translate the result from that condition. That's why the translate pipe is outside the ()

Answer 2

Try like this:

<button type="button"     
      mat-flat-button
      [innerHTML] = "(display ? 'HIDE_NUMBER' : 'SHOW_NUMBER') | translate"
       (click)="toggle()">
</button>