Pass data from one view-model to another in Aurelia

Question

I have a page called entry-main and it includes this template:

<template>
    <entry-search></entry-search>
    <entry-details></entry-details>
</template>

Inside <entry-search> there is another custom element. It looks like this:

<template>
    <div class="row">
        <div class="col-lg-12">
            <div class="input-group">
                <span id="entry_search" class="input-group-addon">
                    <span class="fa fa-search"></span>
                </span>
                <!-- important part -->
                    <typeahead id="choose" placeholder="Holding the place"></typeahead>
                <!-- end of important part -->
            </div>
        </div>
    </div>
</template>

Inside the typeahead viewmodel I'm getting the value of my typeahead like this:

$(this.id).on('typeahead:selected', function (e, item) {
       this.selected = item;
});

My question now is, how can I get the this.selected from my typeahead-viewmodel inside my entry-details-viewmodel?
And just for clarity, it should some what like this:

<entry-main>
    <entry-search>
          <typeahead></typeahead>
    </entry-search>

    <entry-details>
          ${selected}
    </entry-details>
</entry-main>

Answer 1

You could do this:

Create a property "selected" in entry-main:

export class EntryMain {
    selected = '';
    //rest of the code
}

Create a bindable property in typeahead:

import { bindable } from 'aurelia-framework';

export class Typeahead {
    @bindable selected;
    //... rest of the code
}

Bind the typeahead's "selected" to the entry-main's "selected"

<entry-main>
    <entry-search>
        <typeahead selected.bind="selected"></typeahead>
    </entry-search>

    <entry-details>
        ${selected}
    </entry-details>
</entry-main>

Untested code, but I think it should work.