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
Should use like that :
<button> {{ cond_vall == true ? 'Case 1' : 'Case 2' }}</button>
true? This works just fine: {{ cond_vall ? 'Case 1' : 'Case 2' }}
cond_vall === trueI 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>
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>
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>
<div ng-app="myModule">
<div ng-controller="myController">
{{message}} <br />
<button ng-click="changeMessage(message)">Change Message</button>
</div>
</div>
var module = angular.module("myModule", []);
module.controller("myController", function($scope) {
$scope.message = "Hello World";
$scope.changeMessage = function(value) {
if(value==="Hello World"){
$scope.message = "Hello Universe!";
}else{
$scope.message = "Hello World";
}
};
});
xyz.component.html
<button (click)="isCoreComponentUpdate ? onSubmit(): updateCoreComponent()">{{isCoreComponentUpdate ? 'Update' : 'Add'}}</button>
xyz.component.ts
isCoreComponentUpdate: Boolean= false;
when we want to use same button as Add and edit when we open add popup and edit popup that time this code will helpfull
where 'isCoreComponentUpdate' Boolean value based on that we are showing label and enabling action.
