johntom/index.html

## index.html
<!doctype html>
<html>

<head>
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

<body>
	<div aurelia-app="src/configure">
		Loading...
	</div>

	<script src="https://rawgit.com/aurelia-ui-toolkits/demo-materialize/master/jspm_packages/system.js"></script>
	<script src="https://rawgit.com/aurelia-ui-toolkits/demo-materialize/master/jspm.config.js"></script>
	<script>
		System.import("aurelia-bootstrapper");
	</script>
</body>

</html>

## src\app.html
<template>
	<div>
		<div>
			<p><a md-button class="modal-trigger" href="#modal1">show modal (href with ID)</a></p>
			<p style="margin-top: 15px;">
				<button md-button click.delegate="openModal()">show modal (button without ID)</button>
			</p>
		</div>
		<div id="modal1" md-modal md-modal.ref="modal">
			<div class="modal-content">
				<h4>Modal Header</h4>
				<p>A bunch of text</p>
			</div>
			<div class="modal-footer">
				<a click.delegate="agree()" md-button="flat: true;" md-waves="color: accent;" class="modal-action modal-close">Agree</a>
				<a click.delegate="disagree()" md-button="flat: true;" md-waves="color: accent;" class="modal-action modal-close">Disagree</a>
			</div>
		</div>
	</div>
</template>

## src\app.ts
import { autoinject } from "aurelia-framework";
import { MdToastService, MdModal } from "aurelia-materialize-bridge";

@autoinject
export class BasicUse {
	constructor(private toast: MdToastService) { }

	modal: MdModal;

	agree(e) {
		this.toast.show("You agreed!", 4000);
	}

	disagree(e) {
		this.toast.show("You disagreed!", 4000);
	}

	openModal() {
		this.modal.open();
	}
}

## src\configure.ts
export async function configure(aurelia) {
	await aurelia.loader.loadModule("materialize-css");
	aurelia.use
		.standardConfiguration()
		.developmentLogging()
		.plugin("aurelia-materialize-bridge", bridge => bridge.useAll())
		.plugin("aurelia-validation")
		.globalResources("src/shared/logger");

	await aurelia.start();
	aurelia.setRoot("src/app");
}
	<!doctype html>
	<html>

	<head>
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
	</head>

	<body>
	<div aurelia-app="src/configure">
	Loading...
	</div>

	<script src="https://rawgit.com/aurelia-ui-toolkits/demo-materialize/master/jspm_packages/system.js"></script>
	<script src="https://rawgit.com/aurelia-ui-toolkits/demo-materialize/master/jspm.config.js"></script>
	<script>
	System.import("aurelia-bootstrapper");
	</script>
	</body>

	</html>
	<template>
	<div>
	<div>
	<p><a md-button class="modal-trigger" href="#modal1">show modal (href with ID)</a></p>
	<p style="margin-top: 15px;">
	<button md-button click.delegate="openModal()">show modal (button without ID)</button>
	</p>
	</div>
	<div id="modal1" md-modal md-modal.ref="modal">
	<div class="modal-content">
	<h4>Modal Header</h4>
	<p>A bunch of text</p>
	</div>
	<div class="modal-footer">
	<a click.delegate="agree()" md-button="flat: true;" md-waves="color: accent;" class="modal-action modal-close">Agree</a>
	<a click.delegate="disagree()" md-button="flat: true;" md-waves="color: accent;" class="modal-action modal-close">Disagree</a>
	</div>
	</div>
	</div>
	</template>
	import { autoinject } from "aurelia-framework";
	import { MdToastService, MdModal } from "aurelia-materialize-bridge";

	@autoinject
	export class BasicUse {
	constructor(private toast: MdToastService) { }

	modal: MdModal;

	agree(e) {
	this.toast.show("You agreed!", 4000);
	}

	disagree(e) {
	this.toast.show("You disagreed!", 4000);
	}

	openModal() {
	this.modal.open();
	}
	}
	export async function configure(aurelia) {
	await aurelia.loader.loadModule("materialize-css");
	aurelia.use
	.standardConfiguration()
	.developmentLogging()
	.plugin("aurelia-materialize-bridge", bridge => bridge.useAll())
	.plugin("aurelia-validation")
	.globalResources("src/shared/logger");

	await aurelia.start();
	aurelia.setRoot("src/app");
	}