Angular: Button text interpolation not working

Question

I want to obtain similar result to https://stackoverflow.com/a/49680194 but in my case it dosen't work valid. The only difference is boolean variable. Can you explain me what I'm doing wrong?

Below the code listing:

export class SomeComponent {

  enabled: boolean = false;

  toggle() {
    if(this.enabled === true) {
      this.enabled = false;
    } else {
      this.enabled = true;
    }
  }
}

And html template:

<button (click)="toggle()">{{enabled}}</button> <!-- updates only one time (false -> true) -->
<div>{{enabed}}</div> <!-- works correctly -->

Hello! Does this answer your question?https://stackoverflow.com/questions/51714890/unable-to-change-text-of-a-button-in-angular — , Dec 18 '19 at 12:32
The above code works fine - https://stackblitz.com/edit/angular-d2jtex .. What is the error you are facing — Allabakash, Dec 18 '19 at 12:33
there is nothing wrong with your code also why do you even need a function ? `` — Joel Joseph, Dec 18 '19 at 12:35
The text of the button has been updated just one time from `false` to `true`, but the expression from the `div` tag has been updated everytime. — Lambalab, Dec 18 '19 at 12:43
Yes, I did but also not working... @Akai shur say sth about config, which file I should share with you? — Lambalab, Dec 18 '19 at 13:05

Nimer Awad · Answer 1 · 2019-12-18T12:47:41.570

1

I tried your case, and you're right, it's weird.

Maybe it treats it literally as boolean, not that you want to show value as is.

You can turn around it by converting it into string, like:

<button (click)="toggle()">{{enabled + ''}}</button>

It works to me.

BTW, you can simplify your toggle function to be like:

toggle() {
    this.enabled = !this.enabled;
}

edited Dec 18 '19 at 12:47

answered Dec 18 '19 at 12:38

Nimer Awad

3,967
3
17
31

score 0 · Accepted Answer · answered Dec 18 '19 at 12:42

0

I tried your code and it seems to work:

https://codesandbox.io/s/wonderful-easley-4ncuy?fontsize=14&hidenavigation=1&theme=dark

So probably your error it's not in the code but in the configuration, maybe you can show your project so we can see things clearly.

answered Dec 18 '19 at 12:42

Akai shur

187
1
18

Which files I should share with you? – Lambalab Dec 18 '19 at 12:56
I just saw your comment, if it's a new project I doubt the problem it's from config, so yeah looks like it's a version error :S There is not much we can do to help you in this case :/ – Akai shur Dec 18 '19 at 13:57

score 0 · Answer 3 · answered Dec 18 '19 at 13:32

0

I tried with completely new project and seems that is a bug related with version 8.2.14 of angular, someone else can confirm my theory?

answered Dec 18 '19 at 13:32

Lambalab

13
3

Angular: Button text interpolation not working

3 Answers3