Thanood/app.html

## app.html
<template>
  <div class="row">
    <div style="margin-bottom: 10px;">
      <button md-button click.delegate="selectTab2()">select tab 2</button><br /><br />
      Selected tab: ${demotabs.selectedTab | stringify}
    </div>

    <ul md-tabs md-tabs.ref="demotabs" class="z-depth-1">
      <li md-waves="color: primary;"><a class="active" href="#tab_1">Tab 1</a></li>
      <li md-waves="color: primary;"><a href="#tab_2">Tab 2</a></li>
      <li md-waves="color: primary;"><a href="#tab_3">Tab 3</a></li>
      <li md-waves="color: primary;"><a href="#tab_4">Tab 4</a></li>
    </ul>

  </div>
  <div id="tab_1" class="tab-content z-depth-1">
    <p>
      This is tab 1
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi augue, sodales eget felis quis, fringilla luctus ex. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed in quam a velit ultricies suscipit eu sed arcu. Duis dapibus sodales est, a semper augue laoreet et. Quisque tristique molestie odio in pulvinar. Aliquam eget enim vitae felis varius varius at ut nisl.
    </p>
  </div>
  <div id="tab_2" class="tab-content z-depth-1">
    <p>
      This is tab 2
    </p>
    <p>
      Nunc quis lectus elementum, venenatis est eget, blandit dui. Vivamus fermentum nulla interdum massa blandit rhoncus. Ut dui libero, sollicitudin et gravida id, ultricies eu nunc. Nunc nisi sem, facilisis sed mauris et, pharetra tincidunt orci. Cras molestie, arcu ac venenatis fringilla, nulla dui laoreet magna, sit amet blandit diam tellus et nisl. Nunc a augue aliquam, tristique justo vel, efficitur metus. Nullam faucibus blandit tincidunt.
    </p>
  </div>
  <div id="tab_3" class="tab-content z-depth-1">
    <p>
      This is tab 3
    </p>
    <p>
      Praesent ullamcorper tortor ante, sed tempor dui aliquet id. Donec vehicula fringilla vestibulum. Proin suscipit ex vitae massa ultricies tempus. Nulla id finibus metus. Phasellus sollicitudin mi ac rhoncus rutrum. Nullam vulputate semper turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
    </p>
  </div>
  <div id="tab_4" class="tab-content z-depth-1">
    <p>
      This is tab 4
    </p>
    <p>
      In tincidunt, massa sed mollis ornare, erat turpis aliquam orci, sed elementum nulla dui non nibh. Quisque et quam non ante ultrices pellentesque. Proin tempus ante justo, id placerat augue luctus at. Nullam tincidunt, lacus vitae dignissim aliquam, turpis tortor aliquam nisi, sit amet rhoncus urna odio in leo.
    </p>
  </div>
</template>

## app.js
export class App {
  selectTab2() {
    this.demotabs.selectTab('tab_2');
  }
}

export class StringifyValueConverter {
  toView(value) {
    return JSON.stringify(value);
  }
}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body aurelia-app="main">
    <h1>Loading...</h1>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script>
    <script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-materialize-bundles/0.20.2/config2.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>

## main.js
/*******************************************************************************
 * The following two lines enable async/await without using babel's
 * "runtime" transformer. Uncomment the lines if you intend to use async/await.
 *
 * More info here:  https://github.com/jdanyow/aurelia-plunker/issues/2
 */
//import regeneratorRuntime from 'babel-runtime/regenerator';
//window.regeneratorRuntime = regeneratorRuntime;
/******************************************************************************/

import 'materialize';

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-materialize-bridge', bridge => bridge.useAll() );

  aurelia.start().then(a => a.setRoot());
}
	<template>
	<div class="row">
	<div style="margin-bottom: 10px;">
	<button md-button click.delegate="selectTab2()">select tab 2</button><br /><br />
	Selected tab: ${demotabs.selectedTab \| stringify}
	</div>

	<ul md-tabs md-tabs.ref="demotabs" class="z-depth-1">
	<li md-waves="color: primary;"><a class="active" href="#tab_1">Tab 1</a></li>
	<li md-waves="color: primary;"><a href="#tab_2">Tab 2</a></li>
	<li md-waves="color: primary;"><a href="#tab_3">Tab 3</a></li>
	<li md-waves="color: primary;"><a href="#tab_4">Tab 4</a></li>
	</ul>

	</div>
	<div id="tab_1" class="tab-content z-depth-1">
	<p>
	This is tab 1
	</p>
	<p>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi augue, sodales eget felis quis, fringilla luctus ex. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed in quam a velit ultricies suscipit eu sed arcu. Duis dapibus sodales est, a semper augue laoreet et. Quisque tristique molestie odio in pulvinar. Aliquam eget enim vitae felis varius varius at ut nisl.
	</p>
	</div>
	<div id="tab_2" class="tab-content z-depth-1">
	<p>
	This is tab 2
	</p>
	<p>
	Nunc quis lectus elementum, venenatis est eget, blandit dui. Vivamus fermentum nulla interdum massa blandit rhoncus. Ut dui libero, sollicitudin et gravida id, ultricies eu nunc. Nunc nisi sem, facilisis sed mauris et, pharetra tincidunt orci. Cras molestie, arcu ac venenatis fringilla, nulla dui laoreet magna, sit amet blandit diam tellus et nisl. Nunc a augue aliquam, tristique justo vel, efficitur metus. Nullam faucibus blandit tincidunt.
	</p>
	</div>
	<div id="tab_3" class="tab-content z-depth-1">
	<p>
	This is tab 3
	</p>
	<p>
	Praesent ullamcorper tortor ante, sed tempor dui aliquet id. Donec vehicula fringilla vestibulum. Proin suscipit ex vitae massa ultricies tempus. Nulla id finibus metus. Phasellus sollicitudin mi ac rhoncus rutrum. Nullam vulputate semper turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
	</p>
	</div>
	<div id="tab_4" class="tab-content z-depth-1">
	<p>
	This is tab 4
	</p>
	<p>
	In tincidunt, massa sed mollis ornare, erat turpis aliquam orci, sed elementum nulla dui non nibh. Quisque et quam non ante ultrices pellentesque. Proin tempus ante justo, id placerat augue luctus at. Nullam tincidunt, lacus vitae dignissim aliquam, turpis tortor aliquam nisi, sit amet rhoncus urna odio in leo.
	</p>
	</div>
	</template>
	export class App {
	selectTab2() {
	this.demotabs.selectTab('tab_2');
	}
	}

	export class StringifyValueConverter {
	toView(value) {
	return JSON.stringify(value);
	}
	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body aurelia-app="main">
	<h1>Loading...</h1>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script>
	<script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-materialize-bundles/0.20.2/config2.js"></script>
	<script>
	System.import('aurelia-bootstrapper');
	</script>
	</body>
	</html>
	/*******************************************************************************
	* The following two lines enable async/await without using babel's
	* "runtime" transformer. Uncomment the lines if you intend to use async/await.
	*
	* More info here: https://github.com/jdanyow/aurelia-plunker/issues/2
	*/
	//import regeneratorRuntime from 'babel-runtime/regenerator';
	//window.regeneratorRuntime = regeneratorRuntime;
	/******************************************************************************/

	import 'materialize';

	export function configure(aurelia) {
	aurelia.use
	.standardConfiguration()
	.developmentLogging()
	.plugin('aurelia-materialize-bridge', bridge => bridge.useAll() );

	aurelia.start().then(a => a.setRoot());
	}