how to add and remove custom elements on the fly or by an click event in aurelia

Almost give up on Aurelia, I'm struggling with adding custom elements dynamic in Aurelia, lets say we have a custom tag: view my-element.html:

<template>  My Element ${name} </template>

viewmodel: my-element.js:

export class MyElement {
    @bindable name = '';
}

so I try to manually add this tag, in another view:

<template>
<button type="button" click.delegate="createMyElement()">Remove</button>
</template>

another viewmodel:

export class App {

   createMyElement() {
     //how to do it in here to create element 
     //<my-element name='name1'></my-element>
   }
}

I looked this link https://gist.run/?id=762c00133d5d5be624f9, but it needs a container reference
<div ref="container"></div>

I dont want to specify a container, instead I want it to be append to current view.

I also tried using aurelia-compiler from https://github.com/gooy/aurelia-compiler, when I try to import it, it was able to locate file'gooy/aurelia-compiler', but I got this error: Error invoking Compiler. Are you trying to inject/register something that doesn't exist with DI?

Can someone please help? thanks.