Kevinwkd

// Mocha package.json
{
  "name": "mocha",
  ...
  "bin": {
    "mocha": "./bin/mocha",
    "_mocha": "./bin/_mocha"
  },
  ...
}

Kevinwkd

{
  "name": "death-clock",
  "version": "1.0.0",
  "scripts": {
    "start": "node server.js",
    "test": "mocha --reporter spec test"
  },
  "devDependencies": {
    "mocha": "^1.17.1"
  }

Kevinwkd

export class AppModule {
  constructor(injector: Injector) {
    const custom = createCustomElement(HelloWorldComponent,{injector});
    customElements.define('app-hello-world', custom);
  }
  ngDoBootstrap() {}
}

Kevinwkd

export class AppModule {
  constructor(injector: Injector) {
    const custom = createCustomElement(HelloWorldComponent, {injector});
    customElements.define('app-hello-world', custom);
  }
}

Kevinwkd

import {NgModule, Injector} from '@angular/core';
import {createCustomeElement} from '@angular/elements';
@NgModule({
  declarations: [AppComponent,HelloWorldComponent],
  imports: [BrowserModule,AppRoutingModule],
  entryComponents: [HelloWorldComponent],
  providers: [],
  bootstrap: [AppComponent]
})

Kevinwkd

export class EntryAppComponent {
  showMessage() {
    const hello = document.getElementById('hello');
    hello.innerHTML = '<app-hello-world></app-hello-world>';
  }
}

Kevinwkd

<h1>Welcome To Angular Elements</h1>
<div id="hello"></div>
<button (click)="showMessage()">Display?</button>

// entryApp.component.ts
export class EntryAppComponent {
  showMessage() {
    const hello = document.getElementById('hello');
    hello.innerHTML = '<app-hello-world></app-hello-world>';
  }

Kevinwkd

@ViewChild("tpl") tpl: TemplateRef<any>;
let view = this.tpl.createEmbeddedView(null);

Kevinwkd

@Component({
    selector: 'sample',
    ...
   
export class SampleComponent{
    constructor(private hostElement: ElementRef) {
        //outputs <sample>...</sample>
        console.log(this.hostElement.nativeElement.outerHTML);
}

Kevinwkd

import { Component, AfterViewInit, ViewChild,
ViewContainerRef, TemplateRef } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
  <h1>Application Content</h1>
  <ng-container #container></ng-container> <!-- embed view here -->
  <h3>End of Application</h3>