Angular: Toggle Text of Button Based on Boolean Value in Model

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



Leave a reply



Submit