Angular 2: Change Some Text Depending on the Checkbox

Question

I'm really new to Angular 2 and I've been playing around with it to learn it. I was trying to change some text on the screen depending on a boolean value.

Let's say I have a toggle checkbox and I want to switch back and forth between some text on the screen depending on the toggle button.

<div class="ui toggle checkbox">
  <input type="checkbox" [(ngModel)]="version2" name="versionControl">
  <label>version2</label>
</div>
{{versionText}}

And the component would be something like this

export class AppComponent {
  version2:boolean=false;
  versionText= this.version2 ?  "This is Version 1:" : "Switched to Version 2"
  ...
}

Of course it doesn't work since I'm assigning the value at start and at the beginning, version2 is false and even if the boolean value changes later, the text doesn't since I'm not assigning it again, I guess..

I know I can do it with some sort of onClick function (or something similar) on checkbox but I just want to know if there is an easier and more "Angular" way of accomplishing this.

ulou · Accepted Answer · 2016-10-03 19:58:10Z

2

You can use ngIf:

<div class="ui toggle checkbox">
  <input type="checkbox" [(ngModel)]="version2" name="versionControl">
  <label *ngIf="verion2">This is Version 1:</label>
  <label *ngIf="!verion2">Switched to Version 2</label>
</div>

or just

<div class="ui toggle checkbox">
  <input type="checkbox" [(ngModel)]="version2" name="versionControl">
  <label>{{versionText}}</label>
</div>

answered Oct 3, 2016 at 19:58

ulou

5,9326 gold badges40 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 2: Change Some Text Depending on the Checkbox

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related