ng-dynamic demo plunker - Angular ^4.0.0 - ng-dynamic ^3.0.0

<!DOCTYPE html>
<html>

  <head>
    <base href="." />
    <title>ng-dynamic playground</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://unpkg.com/zone.js/dist/zone.js"></script>
    <script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
    <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
    <script src="config.js"></script>
    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  </head>

  <body>
    <my-app>
    loading...
  </my-app>
  </body>

</html>

/* Styles go here */

### Angular2 Starter Plunker - Typescript - RC.0

A simple plunker demonstrating Angular2 usage:
- Uses SystemJS + TypeScript to compile on the fly
- Includes binding, directives, http, pipes, and DI usage.

For opening

const ngVersion = '4'
const libVersion = '3'

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  paths: {
    'npm:': 'https://unpkg.com/'
  },
  //map tells the System loader where to look for things
  map: {
    
    'app': './src',
    
    '@angular/core': `npm:@angular/core@${ngVersion}/bundles/core.umd.js`,
    '@angular/common': `npm:@angular/common@${ngVersion}/bundles/common.umd.js`,
    '@angular/compiler': `npm:@angular/compiler@${ngVersion}/bundles/compiler.umd.js`,
    '@angular/platform-browser': `npm:@angular/platform-browser@${ngVersion}/bundles/platform-browser.umd.js`,
    '@angular/platform-browser-dynamic': `npm:@angular/platform-browser-dynamic@${ngVersion}/bundles/platform-browser-dynamic.umd.js`,
    '@angular/http': `npm:@angular/http@${ngVersion}/bundles/http.umd.js`,
    '@angular/router': `npm:@angular/router@${ngVersion}/bundles/router.umd.js`,
    '@angular/forms': `npm:@angular/forms@${ngVersion}/bundles/forms.umd.js`,
    
    '@angular/core/testing': `npm:@angular/core@${ngVersion}/bundles/core-testing.umd.js`,
    '@angular/common/testing': `npm:@angular/common@${ngVersion}/bundles/common-testing.umd.js`,
    '@angular/compiler/testing': `npm:@angular/compiler@${ngVersion}/bundles/compiler-testing.umd.js`,
    '@angular/platform-browser/testing': `npm:@angular/platform-browser@${ngVersion}/bundles/platform-browser-testing.umd.js`,
    '@angular/platform-browser-dynamic/testing': `npm:@angular/platform-browser-dynamic@${ngVersion}/bundles/platform-browser-dynamic-testing.umd.js`,
    '@angular/http/testing': `npm:@angular/http@${ngVersion}/bundles/http-testing.umd.js`,
    '@angular/router/testing': `npm:@angular/router@${ngVersion}/bundles/router-testing.umd.js`,
    
    'rxjs': 'npm:rxjs',
    'typescript': 'npm:typescript@latest/lib/typescript.js',
    'ng-dynamic':  `https://unpkg.com/ng-dynamic@${libVersion}/index.js`,
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    },
    rxjs: {
      defaultExtension: 'js'
    }
  }
});

//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app';

platformBrowserDynamic().bootstrapModule(AppModule)

import { NgModule, Component, ViewChild, ElementRef, Input, OnInit } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { OnMount, DynamicHTMLModule } from 'ng-dynamic';


@Component({
  selector: 'awesome-button',
  template: `<button (click)="onClick()" #innerContent><ng-content></ng-content></button>`,
})
export class AwesomeButtonComponent implements OnMount, OnInit {
  @Input() msg: string;
  @ViewChild('innerContent') innerContent: ElementRef;

  dynamicOnMount(attr: Map<string, string>, innerHTML: string, el: any) {
    this.msg = attr.get('msg');
    this.innerContent.nativeElement.innerHTML = innerHTML;
    console.log(`onMount: ${this.msg}`);
  }

  ngOnInit() {
    console.log(`onInit: ${this.msg}`);
  }

  onClick() {
    console.log('clicked');
  }
}

@Component({
  selector: 'my-app',
  template: `
    <header><h1>ng-dynamic</h1></header>
    <main>
      <dynamic-html [content]="content"></dynamic-html>
      <awesome-button msg="static">Static HTML</awesome-button>
    </main>
    <hr>
    <textarea [(ngModel)]="content" rows="20" cols="50"></textarea>
  `,
})
export class AppComponent {
  content: string;

  ngOnInit() {
    fetchAwesomeDocument().then(content => {
      this.content = content;
    });
  }
}

export function fetchAwesomeDocument() {
  return Promise.resolve(`<article>
    <h1>Awesome Document</h1>
    <div>
      <p>bla bla bla</p>
      <awesome-button msg="dynamic">Dynamic HTML</awesome-button>
    </div>
  </article>`);
}

@NgModule({
  imports: [ 
    BrowserModule,
    FormsModule,
    DynamicHTMLModule.forRoot({
      components: [
        { component: AwesomeButtonComponent, selector: 'awesome-button' },
      ]
    }),
  ],
  declarations: [ AppComponent, AwesomeButtonComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}