angular: toggle text of button based on boolean value in model

Question

What is a simple way to change the text in a button element based on a boolean value?

pseudo code:

<button> some text OR some other text </button>

I read this: Angularjs if-then-else construction in expression

and this regarding ng-switch: http://docs.angularjs.org/api/ng.directive:ngSwitch

Neither seems to work using bool value from model

Answer 1

Should use like that :

<button> {{ cond_vall == true ? 'Case 1' : 'Case 2' }}</button>

Answer 2

I guess it depends on what the text is that you are trying to show. If you have control over what the text is in the controller, you can bind the text to a scope variable and set it in the controller so you don't have to put any logic in the view. Something like:

<button>{{someScopeVarWithYourString}}</button>

Otherwise, you can use an ng-if or ng-show on the boolean condition.

<button ng-show="someBoolValue">some text</button>
<button ng-show="!someBoolValue">some other text</button>

Answer 3

Because I needed to use a filter (translate filter) for the button text, the following solution worked best for me:

<button>
    <span> {{ condition ? 'some_text' : 'some_Other_text' | translate }}</span>
</button>

Answer 4

Only parenthesis seem required when combining Angular 8 LTS, Typescript 3.5 and ngx-bootstrap

<button type="button" class="btn"> {{ ( boolVar ? 'text' : 'other text')  | translate }} </button>