Angular2 [innerHTML] if else validation

Question

I want to display different text in a button, depending on some JSON data.

Example (of course not working):

<button [innerHTML]='"Male" if user.gender==1 else "Female"'></button>

I know this functionality already exisits in e.g [ngClass]:

<button [ngClass]='{"btn-success": data.complete, "btn-primary": !data.complete}'>Some text</button>

Using the [ngClass] approach is displayed as [object:Object] and therefore not working.

Any solution?

Answer 1

use ternary expression

<button [innerHTML]='user.gender == 1 ? "Male" : "Female"'></button>

anyway you don't need innerHtml for this. I'd do it like:

<button>{{ user.gender == 1 ? "Male" : "Female" }}</button>