ndtuan412/contact.html

## contact.html
<template>
    <div class="contact box">
        <h3>Contact</h3>
        <div class="form-box form-horizontal">
            <div class=" form-inline">
                <label for="phone">Phone</label>
                <input type="phone" class="form-control" name="phone" placeholder="Phone" value.two-way="phone">
            </div>
        </div>
    </div>
</template>

## contact.js
import {bindable} from 'aurelia-framework';

export class ContactCustomElement {
    @bindable phone;
};

## create-location.js
import {bindable, processContent, noView, customElement} from 'aurelia-framework'

@processContent(function(viewCompiler, viewResources, element, instruction) {
    instruction.viewFactory = viewCompiler.compile('<template>' + element.innerHTML + '</template>', viewResources, instruction);
    element.innerHTML = '';
    return false;
})
@noView
export class CreateLocationCustomElement {
    @bindable myContact;

    save() {
        alert(this.myContact.phone);
    }
}

## index.html
<!doctype html>
<html>
  <head>
    <title>Create Location</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body aurelia-app="main">
    <create-location my-contact.two-way="vm">
        <contact title="Contact" phone="01234" view-model.ref="vm"></contact>
        <button type="button" click.delegate="save()">Save</button>
    </create-location>

    <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
    <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>

## main.js
export function configure(aurelia) {
	aurelia.use
		.defaultBindingLanguage()
		.defaultResources()
		.developmentLogging()
		.globalResources(["create-location", "contact"]);

	aurelia.start().then(a => {
		a.enhance(document.body);
	});
}
	<template>
	<div class="contact box">
	<h3>Contact</h3>
	<div class="form-box form-horizontal">
	<div class=" form-inline">
	<label for="phone">Phone</label>
	<input type="phone" class="form-control" name="phone" placeholder="Phone" value.two-way="phone">
	</div>
	</div>
	</div>
	</template>
	import {bindable} from 'aurelia-framework';

	export class ContactCustomElement {
	@bindable phone;
	};
	import {bindable, processContent, noView, customElement} from 'aurelia-framework'

	@processContent(function(viewCompiler, viewResources, element, instruction) {
	instruction.viewFactory = viewCompiler.compile('<template>' + element.innerHTML + '</template>', viewResources, instruction);
	element.innerHTML = '';
	return false;
	})
	@noView
	export class CreateLocationCustomElement {
	@bindable myContact;

	save() {
	alert(this.myContact.phone);
	}
	}
	<!doctype html>
	<html>
	<head>
	<title>Create Location</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body aurelia-app="main">
	<create-location my-contact.two-way="vm">
	<contact title="Contact" phone="01234" view-model.ref="vm"></contact>
	<button type="button" click.delegate="save()">Save</button>
	</create-location>

	<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
	<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
	<script>
	System.import('aurelia-bootstrapper');
	</script>
	</body>
	</html>
	export function configure(aurelia) {
	aurelia.use
	.defaultBindingLanguage()
	.defaultResources()
	.developmentLogging()
	.globalResources(["create-location", "contact"]);

	aurelia.start().then(a => {
	a.enhance(document.body);
	});
	}