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": dataplete, "btn-primary": !dataplete}'>Some text</button>

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

Any solution?

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.plete, "btn-primary": !data.plete}'>Some text</button>

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

Any solution?

• javascript
• angular
• tags

2 Answers 2

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>

A more flexible way is just bind to a variable as the button text.

Like this

<button>{{buttonText}}</button>

and in your .ts file, just setting the value of buttonText based on your json value.