# Controller toggle button and message

**URL:** <https://discuss.emberjs.com/t/controller-toggle-button-and-message/18118>\
**Category:** General\
**Created:** [August 12, 2020, 1:10am UTC](https://discuss.emberjs.com/t/controller-toggle-button-and-message/18118 "2020-08-12T01:10:29Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Eddy](https://avatars.discourse-cdn.com/v4/letter/e/57b2e6/32.png) [@Eddy](https://discuss.emberjs.com/u/Eddy)\
**Post date:** [August 12, 2020, 1:10am UTC](https://discuss.emberjs.com/t/controller-toggle-button-and-message/18118/1 "2020-08-12T01:10:29Z")

</div>

Hi guys I am new to Ember and when I toggle the isButtonOn the message does not change, any guidance in the right direction would be appreciated! 🙂//controller/app.js import Ember from ‘ember’;

const { get, set, computed } = Ember;

export default Ember.Controller.extend({ isButtonOn: false,

toggle () { set(this,‘isButtonOn’,!this[‘isButtonOn’]) // this.toggleProperty(‘isButtonOn’) console.log(this.isButtonOn) }, text: computed(function () {

```
return get(this, 'isButtonOn') ?
  'Message 1 the button is on' :
	'Message 2 the button os off';

```

}), });

---

<div class="post-metadata">

**Author:** ![dknutsen](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/dknutsen/32/16471_2.png) [@dknutsen](https://discuss.emberjs.com/u/dknutsen)\
**Post date:** [August 12, 2020, 1:28am UTC](https://discuss.emberjs.com/t/controller-toggle-button-and-message/18118/2 "2020-08-12T01:28:55Z")

</div>

Hi @Eddy, welcome to Ember!

First off, just for reference, to format code in here so it looks nice you can wrap it in triple backticks, “`”

As to what’s causing your issue I think it’s the “text” computed property. This is a “classic” computed property whereas the most modern computed properties would use what we call “tracked properties”, negating the need for observing specific properties. However with “classic” computed properties like you are using you need so specify which properties to watch in order to re-compute. I think you want something like this:

```auto
text: computed('isButtonOn', function () {
  return get(this, 'isButtonOn') ?
    'Message 1 the button is on' :
	'Message 2 the button os off';
})

```

The first argument[s] to `computed` should be the properties to observe. Now the “text” computed property will be recomputed anytime ‘isButtonOn’ changes.

Another thing to note is that, assuming you’re using Ember 3.2 or later, you can use “ES5 getters” instead of `get(this, '...')`. So your computed property could be as simple as:

```auto
text: computed('isButtonOn', function () {
  return this.isButtonOn ? 'Message 1 the button is on' : 'Message 2 the button is off';
})

```

or even shorter:

```auto
text: computed('isButtonOn', function () {
  const on = this.isButtonOn;
  return `Message ${on ? '1' : '2'} the button is ${on ? 'on' : 'off'}`;
})

```

---

<div class="post-metadata">

**Author:** ![Eddy](https://avatars.discourse-cdn.com/v4/letter/e/57b2e6/32.png) [@Eddy](https://discuss.emberjs.com/u/Eddy)\
**Post date:** [August 15, 2020, 12:34pm UTC](https://discuss.emberjs.com/t/controller-toggle-button-and-message/18118/3 "2020-08-15T12:34:45Z")

</div>

@dknutsen thanks so much for the tips, and the awesome examples to follow. 👍