Aurelia - compose view - aurelia

Question

I am totally new to this framework. Going through all Docs I have successfully configure Aurelia framework using visual studio and type script.
I want to know how to compose a view inside another view and and initialize its view model from its parent.
For example:
Here in navigation skeleton we have one view as welcome displaying first name and second name with submit button.
Now I created one Route name it as MyApp inside this I want to compose welcome view and i want to pass first name and second name to its view model.
Please let me know how to do that?
This is how my Html MyApp looks like:
<template>
<import from='welcome'></import>
<section class="au-animate">
<compose view-model="welcome"></compose>
</section>
</template>
This is How View Model is :
import {inject} from 'aurelia-framework';
import refWelcome = require("welcome");
#inject(refWelcome)
export class myApp {
vm;
title: string;
constructor(refWelcome) {
this.title = "My App Demo";
this.vm = refWelcome;
console.log(this.vm);
}
}
This is view model for welcome view:
import {computedFrom} from 'aurelia-framework';
export class Welcome{
heading = 'Welcome to the Aurelia Navigation App!';
firstName = 'John';
lastName = 'Doe';
previousValue = this.fullName;
constructor(fname: string, lname: string) {
if (fname != null || lname != null) {
this.firstName = fname;
this.lastName = lname;
}
}
}

Answer 1

I think you have a few issues in your code -
You need to fix the syntax for your myApp's title property.
Conventionally you should name your classes PascalCase.
You can't use a standard HTML import at the moment, you need to use require if you are requiring a custom element
To compose the view you can use two methods -
Compose custom element (require not required)
<template>
<section class="au-animate">
<compose view-model="./welcome"></compose>
</section>
</template>
No idea why that won't display without the backticks
As a custom element
<template>
<require from='welcome'></require>
<section class="au-animate">
<welcome></welcome>
</section>
</template>