# Testing out two way binding with custom elements results in error

**URL:** <https://discourse.aurelia.io/t/testing-out-two-way-binding-with-custom-elements-results-in-error/2447>\
**Category:** Uncategorized\
**Created:** [April 8, 2019, 2:15pm UTC](https://discourse.aurelia.io/t/testing-out-two-way-binding-with-custom-elements-results-in-error/2447 "2019-04-08T14:15:45Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![si2030](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/si2030/32/275_2.png) [@si2030](https://discourse.aurelia.io/u/si2030)\
**Post date:** [April 8, 2019, 2:15pm UTC](https://discourse.aurelia.io/t/testing-out-two-way-binding-with-custom-elements-results-in-error/2447/1 "2019-04-08T14:15:45Z")

</div>

I am having trouble understanding how this works. I have a calendar custom element which is added to the html file of scheduler component. I want to return some options from the scheduler component to the calendar element. I am a newby so am learning syntax etc at the same time. My approach was to create a two way binding variable in calendar (the custom component) which receives a value from the scheduler. Since its loaded up in the scheduler it should display the value in the console. Its instead giving the following error:

```
aurelia-logging-console.js?dc89:45 ERROR [app-router] Error: Parser Error: Unconsumed token world at column 6 in expression [hello world]
    at ParserImplementation.err (aurelia-binding.js?5f98:2857)
    at ParserImplementation.parseBindingBehavior (aurelia-binding.js?5f98:2392)
    at Parser.parse (aurelia-binding.js?5f98:2349)
    at SyntaxInterpreter.bind (aurelia-templating-binding.js?570d:489)
    at SyntaxInterpreter.interpret (aurelia-templating-binding.js?570d:461)
    at TemplatingBindingLanguage.createAttributeInstruction (aurelia-templating-binding.js?570d:721)
    at ViewCompiler._compileElement (aurelia-templating.js?8628:3013)
    at ViewCompiler._compileNode (aurelia-templating.js?8628:2776)
    at ViewCompiler._compileElement (aurelia-templating.js?8628:3096)
    at ViewCompiler._compileNode (aurelia-templating.js?8628:2776)

```

This is what I did:  
In calendar, I placed this for the variable “message” - two way binding… etc  
`@bindable({ defaultBindingMode: bindingMode.twoWay }) message: string;`

and, in scheduler.html (the parent) I placed this as an attribute:  
`<calendar message.bind="hello world"></calendar>`

My question, How do you add a variable into a custom component that receives a a value from the parent it has been added to?

I think I set the var correctly but I would really like to set up this and other vars in the view model instead of the HTML… wondering how you would do this… I want options set in scheduler to be received by the calendar element…

Regards

Simon

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [April 8, 2019, 9:07pm UTC](https://discourse.aurelia.io/t/testing-out-two-way-binding-with-custom-elements-results-in-error/2447/2 "2019-04-08T21:07:59Z")

</div>

The error you got means the expression in your template is not a valid expression.

In JS, you cannot have a variable name with space: `hello world`

I guess you want to pass a string literal with value ‘hello world’, so maybe remove `.bind`?

---

<div class="post-metadata">

**Author:** ![si2030](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/si2030/32/275_2.png) [@si2030](https://discourse.aurelia.io/u/si2030)\
**Post date:** [April 8, 2019, 11:26pm UTC](https://discourse.aurelia.io/t/testing-out-two-way-binding-with-custom-elements-results-in-error/2447/3 "2019-04-08T23:26:23Z")

</div>

Yes that worked. I also wondered how you might set two-way variables not in the html view as I have done `<calendar message="hello world"></calendar>`but in the VM. Can you access the custom element vars from the parent VM?

---

<div class="post-metadata">

**Author:** ![Malexion](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/malexion/32/188_2.png) [@Malexion](https://discourse.aurelia.io/u/Malexion)\
**Post date:** [April 9, 2019, 4:31pm UTC](https://discourse.aurelia.io/t/testing-out-two-way-binding-with-custom-elements-results-in-error/2447/4 "2019-04-09T16:31:51Z")

</div>

```auto
<calendar view-model.ref="myCalendar"></calendar>

```

In the parent VM

```javascript
...
attached() {
   if(this.myCalendar)
      this.myCalendar.message = 'Hello World';
}
...

```

**Note:** You should if test if this.myCalendar exists since I think it will not exist until attached() but maybe in bind() can’t remember.

---

<div class="post-metadata">

**Author:** ![Malexion](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/malexion/32/188_2.png) [@Malexion](https://discourse.aurelia.io/u/Malexion)\
**Post date:** [April 9, 2019, 4:38pm UTC](https://discourse.aurelia.io/t/testing-out-two-way-binding-with-custom-elements-results-in-error/2447/5 "2019-04-09T16:38:22Z")

</div>

Also pretty sure this works with the tick marks since `.bind="..."` is something like using `eval('...');` so if it isn’t valid js then you’ll have an error.

```auto
<calendar message.bind=" 'Hello World' "></calendar>

```