angular: toggle text of button based on boolean value in model
Should use like that :
<button> {{ cond_vall == true ? 'Case 1' : 'Case 2' }}</button>
Is it possible to change the label of a button in Angular depending on a condition?
You can use something like that:
HTML
<div class="col-2">
<button class="main-buttton" (click)="increment()" type='button'>
{{isShownNextButton ? 'Text if true' : 'Text if false`enter code here`'}}
</button>
</div>
component.ts
in your component you can use a field. For example:
@Component()
export class SomeComponent{
isShownNextButton: boolean= false;
}
Angular 2 : Toggle Boolean based on a condition
You can bind to the model of the searchbar like this:
<ion-searchbar [(ngModel)]="searchValue" (ionInput)="getNames($event)"></ion-searchbar>
<ion-list *ngIf="searchValue.length >= 2">
<ion-item *ngFor="let name of names">
{{ name }}
</ion-item>
</ion-list>
And in your component define such a variable:
export class ComponentA {
searchValue: string = "";
// ...
}
How to bind to model with Angular Material <mat-button-toggle>?
MatButtonToggle
component doesn't implement ControlValueAccessor
therefore you can't use ngModel
on it. ngDefaultControl
was introduced for other purposes.
MatButtonToggle
is supposed to be a part of mat-button-toggle-group
. But if you want to use it as a standalone component and bind model to it here is some example of how you can do it:
<mat-button-toggle
[checked]="myFlagForButtonToggle"
(change)="myFlagForButtonToggle = $event.source.checked">
Toggle me!
</mat-button-toggle>
Plunker Example
How to toggle between two string values like boolean True/False inside AngularJS?
You can do this (HTML):
<button ng-click="value = { 'on': 'off', 'off':'on'}[value]">On/Off</button>
jsFiddle
But it's very ugly. I would definitely create a method on the scope to change the state, especially if it's more complicated than just toggling two values.
However, if areaStatus
is just to change the area class, I think you should drop it, and instead change the class accordingly to your model state. Something like this:
function Ctrl($scope) {
$scope.state = 'on';
$scope.changeState = function() {
$scope.state = $scope.state === 'on' ? 'off' : 'on';
}
}
...
<area ng-class="{'on': state, 'off': !state }">
I've used 'on' and 'off', but it should be values that make sense to your model.
How do I toggle an ng-show in AngularJS based on a boolean?
You just need to toggle the value of "isReplyFormOpen" on ng-click event
<a ng-click="isReplyFormOpen = !isReplyFormOpen">Reply</a>
<div ng-show="isReplyFormOpen" id="replyForm">
</div>
Button disable and enable button based on condition
It wont work, because you are assigning Y to the submitted var.
Try:
if (data.text[0].status === 'Y') {
// this.submitted = data.text[0].status === 'Y';
console.log( this.submitted);
this.submitted = true;
} else {
console.log(this.submitted);
this.submitted = false;
}
Angular 4 button with click(returnsbooleanVAR) function and routerlink + boolean VAR timing
You can directly redirect in your component
import {Router} from '@angular/router';
export class InfoComponent {
constructor(private router: Router)
check():void{
if(routingActivated) {
this.router.navigate(['./enviando']);
}
}
}
and simplify your HTML
<button (click)="check()">Continue</button>
Related Topics
How to Detect Browser Back Button Click Event Using Angular
Check If a Number Has a Decimal Place/Is a Whole Number
Vue.Js Add Objects to Existing Array
How to Wait for One Function to Finish Before Continuing
Concatenate Json to a String in JavaScript
Using Html5/Javascript to Generate and Save a File
Hiding the Address Bar of a Browser (Popup)
Javascript/Regex: Remove Text Between Parentheses
Hide Div If Value Is Blank (Javascript)
Foreach Is Not a Function Error With JavaScript Array
Filtering Multiple Items With Es6 Array Functions
Retaining the Textbox Values Even After Refresh
How to Convert Raw Mp3 Binary into Blob Url and Play It in Audio Tag
Disable Chrome Strict Mime Type Checking
How to Programmatically Clear/Reset React-Select
How to Find Middle Element of Array in JavaScript
How to Add a Dynamic Action That Will Redirect to Another Page by Executing JavaScript Code