Pass object to custom component through attribute

Question

How can I pass an object to a custom component through an attribute in Aurelia?

My custom component class looks like this:

import {bindable} from 'aurelia-framework';

export class PageHeading {
    @bindable title = '';
    @bindable subTitle = '';
    @bindable path;

    constructor() {
        console.log('page heading...' + this.subTitle);
    }

    created() {
        console.log('created.. ', this.path);
    }
}

And in an html file I use that component like this:

<page-heading title="Dashboard" sub-title="your starting point" path="${path}"></page-heading>

This works fine for strings like title and subTitle, but I'm not sure how to pass an object to the component. Is this possible? If so, how can I do this in Aurelia?

Answer 1

Use the bind command to bind a property to the element's title bindable property:

<page-heading title.bind="myObject" ...></page-heading>

or use the bind command in conjunction with an object-literal binding expression:

<page-heading title.bind="{ foo: 'foo', bar: someProperty, baz: anotherProperty }" ...></page-heading>

Note: ES6 object literal shorthand syntax is supported- assuming you have foo, bar and baz props on your VM, this would work:

<page-heading title.bind="{ foo, bar, baz }" ...></page-heading>