Dynamic composition is a crucial part of developing robust user interfaces in Aurelia. If you worked with the compose element in Aurelia 1, you might (or might not have) needed to obtain a reference to the composed view-model itself.

While Aurelia 2 keeps many things the same, how dynamic composition works is a little different. We have the new au-compose custom element, which allows us to achieve the dynamic composition of components, including passing data into them.

I am in the process of porting over an Aurelia 1 application, and it contains a wizard-based step form. The wizard acts as the containing element and queries the child step custom components, allowing specific methods inside of them to be called (validation callbacks and so on).

Now, in Aurelia 1, you could write something like this:

<template>     <compose view-model="hello" model.bind="myModel" view-model.ref="composeRef"></compose> </template>

Using view-model.ref, you could access the composed view-model instance. In Aurelia 2, it's not much different, except the referenced view-model is not the composed view-model.

<au-compose view-model.bind="hello" model.bind="myModel" view-model.ref="composeRef"></au-compose>

Inside of your view-model, which gets the composeRef value, you can access the composed view-model in the composition controller:

attached() {     this.composedViewModel = this.composeRef.composition.controller.viewModel; }

The composition property on the provided reference is where the view-model and other associated values/properties for the composed custom element live.