bojanv55/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Dumber Gist</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
  <base href="/">
</head>
<!--
Dumber Gist uses dumber bundler, the default bundle file
is /dist/entry-bundle.js.
The starting module is pointed to "main" (data-main attribute on script)
which is your src/main.ts.
-->
<body>
  <my-app></my-app>
  <script src="/dist/entry-bundle.js" data-main="main"></script>
</body>
</html>

## package.json
{
  "dependencies": {
    "aurelia": "latest"
  }
}

## src\main.ts
import Aurelia from 'aurelia';
import { MyApp } from './my-app';

Aurelia.app(MyApp).start();

## src\my-app.html
<div>
  <template repeat.for="component of components">
    <au-compose containerless view-model.bind="component"></au-compose>
  </template>

  <div style="margin:20px">
    <button type="button" click.trigger="render()">Renderuj</button>
    <button type="button" click.trigger="rimuv()">Remove</button>
  </div>

</div>

## src\my-app.ts
import {SomeDemo2} from "./some-demo2";

export class MyApp{
  public components : [any] = [];

  render = () => {
    this.components.push(SomeDemo2);
  }

  rimuv = () => {
    this.components.pop();
  }
}

## src\some-demo2.html
<template style="display:block">
  <div class="some-demo">
    This is some demo2 a kazemo iz pogleda
  </div>
</template>

## src\some-demo2.ts
export class SomeDemo2{
  constructor(private host: Element) {

  }

  attaching = () => {
    const animation = this.host.animate(
        [{ opacity: 0 }, { opacity: 1 }],
        { duration: 15000 },
    );
    return animation.finished;
  }

  detaching = () => {
    const animation = this.host.animate(
        [{ opacity: 1 }, { opacity: 0 }],
        { duration: 15000 },
    );
    return animation.finished;
  }
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Dumber Gist</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
	<base href="/">
	</head>
	<!--
	Dumber Gist uses dumber bundler, the default bundle file
	is /dist/entry-bundle.js.
	The starting module is pointed to "main" (data-main attribute on script)
	which is your src/main.ts.
	-->
	<body>
	<my-app></my-app>
	<script src="/dist/entry-bundle.js" data-main="main"></script>
	</body>
	</html>
	import Aurelia from 'aurelia';
	import { MyApp } from './my-app';

	Aurelia.app(MyApp).start();
	<div>
	<template repeat.for="component of components">
	<au-compose containerless view-model.bind="component"></au-compose>
	</template>

	<div style="margin:20px">
	<button type="button" click.trigger="render()">Renderuj</button>
	<button type="button" click.trigger="rimuv()">Remove</button>
	</div>

	</div>
	import {SomeDemo2} from "./some-demo2";

	export class MyApp{
	public components : [any] = [];

	render = () => {
	this.components.push(SomeDemo2);
	}

	rimuv = () => {
	this.components.pop();
	}
	}
	<template style="display:block">
	<div class="some-demo">
	This is some demo2 a kazemo iz pogleda
	</div>
	</template>
	export class SomeDemo2{
	constructor(private host: Element) {

	}

	attaching = () => {
	const animation = this.host.animate(
	[{ opacity: 0 }, { opacity: 1 }],
	{ duration: 15000 },
	);
	return animation.finished;
	}

	detaching = () => {
	const animation = this.host.animate(
	[{ opacity: 1 }, { opacity: 0 }],
	{ duration: 15000 },
	);
	return animation.finished;
	}
	}