# Update textarea value

**URL:** <https://discuss.emberjs.com/t/update-textarea-value/12240>\
**Category:** Uncategorized\
**Created:** [January 11, 2017, 8:29pm UTC](https://discuss.emberjs.com/t/update-textarea-value/12240 "2017-01-11T20:29:54Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![frsechet](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/frsechet/32/12517_2.png) [@frsechet](https://discuss.emberjs.com/u/frsechet)\
**Post date:** [January 11, 2017, 8:29pm UTC](https://discuss.emberjs.com/t/update-textarea-value/12240/1 "2017-01-11T20:29:54Z")

</div>

I have this code here, and in a component, a textarea that I would like to prefill with a value that I get from `intentsService`.

my-component.js:

```
export default Ember.Component.extend({

  intentsService: Ember.inject.service('intents'),
  intent: Ember.computed.alias('intentsService.intent'),
  mytextarea: null,
  intentObs: Ember.observer('intent', function () {
    this.set('mytextarea', this.get('intent').response);
  })

});

```

my-component.hbs:

```
{{textarea value=newAnswer id="advanced-answer"}}

```

However, my service being a bit slow to respond, the component is created before the intent.response exists, and when the observer triggers, it’s too late and the textarea doesn’t update with the correct value.

Any idea how I can do that?

Thanks!

---

<div class="post-metadata">

**Author:** ![Panman8201](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/panman8201/32/17727_2.png) [@Panman8201](https://discuss.emberjs.com/u/Panman8201)\
**Post date:** [January 11, 2017, 9:14pm UTC](https://discuss.emberjs.com/t/update-textarea-value/12240/2 "2017-01-11T21:14:23Z")

</div>

I haven’t run into this myself, but you might need [`ember-promise-helpers`](https://github.com/fivetanley/ember-promise-helpers) for this;

```auto
{{textarea value=(await newAnswer) id="advanced-answer"}}

```

---

<div class="post-metadata">

**Author:** ![Panman8201](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/panman8201/32/17727_2.png) [@Panman8201](https://discuss.emberjs.com/u/Panman8201)\
**Post date:** [January 11, 2017, 9:31pm UTC](https://discuss.emberjs.com/t/update-textarea-value/12240/3 "2017-01-11T21:31:58Z")

</div>

Reading through your post a bit more, I think you should re-structure your component, use a computed property instead of observer.

```auto
// my-component.js
export default Ember.Component.extend({
  intentsService: Ember.inject.service('intents'),
  myTextareaValue: Ember.computed.alias('intentsService.intent.response')
});

```

```auto
// my-component.hbs
{{textarea value=myTextareaValue id="advanced-answer"}}

```

Although I’m not sure what your Service is exactly, or what `intent.response` is…

---

<div class="post-metadata">

**Author:** ![frsechet](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/frsechet/32/12517_2.png) [@frsechet](https://discuss.emberjs.com/u/frsechet)\
**Post date:** [January 11, 2017, 9:39pm UTC](https://discuss.emberjs.com/t/update-textarea-value/12240/4 "2017-01-11T21:39:42Z")

</div>

Thanks for your help. The service is a call to a distant API, which takes 1-2s to respond.

I’ve tried both propositions, and sadly my textarea stays empty. If I put `{{myTextareaValue}}` right above the textarea, it shows the value of `intent.response` there. And if I put any hardcoded string as the value, it also shows in the textarea. What doesn’t show is `intent.response` as the value of the textarea.

---

<div class="post-metadata">

**Author:** ![Enterpub](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/enterpub/32/12775_2.png) [@Enterpub](https://discuss.emberjs.com/u/Enterpub)\
**Post date:** [January 13, 2017, 4:52pm UTC](https://discuss.emberjs.com/t/update-textarea-value/12240/6 "2017-01-13T16:52:51Z")

</div>

@frsechet in my-component.hbs file the `value` attribute is bound to `newAnswer` property of a component, but inside `intentObs` observer you set another variable `mytextarea`. At least you need to change:

`this.set('mytextarea', this.get('intent').response);` into `this.set('newAnswer', this.get('intent').response);`

---

<div class="post-metadata">

**Author:** ![HelloMihai](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/hellomihai/32/12595_2.png) [@HelloMihai](https://discuss.emberjs.com/u/HelloMihai)\
**Post date:** [January 19, 2017, 12:25am UTC](https://discuss.emberjs.com/t/update-textarea-value/12240/7 "2017-01-19T00:25:26Z")

</div>

your original handlebar is not using the same property `mytextarea` in the controller and `newAnswer` in the handlebars. I see you corrected it to `mytextarea`. So be careful with those properties. You should avoid observers when you can and use computed properties. A computed property will update only if its used in a handlebar or something calls it.

First place i would start is to put a `debugger` statement in the computed property like so

```auto
myTextareaValue: Ember.computed('intentsService.intent.response', function() {
  debugger;
  return this.get('intentsService.intent.response');
})

```

this way you check if the property is set in the first place.