brakmic

const hello = <IVrModule>{
              id: '001',
              name: 'hello',
              type: VrModuleType.AFrame,
              markup: `
              <a-scene>
                  <a-sphere position="0 1.25 -1" radius="1.25" color="#EF2D5E"></a-sphere>
                  <a-box position="-1 0.5 1" rotation="0 45 0" width="1" height="1" depth="1"  
                  color="#4CC3D9"></a-box>
                  <a-cylinder position="1 0.75 1" radius="0.5" height="1.5" color="#FFC65D">

brakmic

public registerModule(): Observable<IServiceMessage> {
      return this.asObservable().map((mod) => {
        if (!_.isNil(mod) &&
            !_.isNil(mod.id) &&
            !_.isNil(mod.name)) {
            this.store.dispatch( { type: VR_MODULE_ADDED, payload: mod });
            return <IServiceMessage> {
              id: '0000',
              content: `Registered vr module '${mod.name}'`
            };

brakmic

<div class="container-fluid main-container">
  <div class="row stage-area">
    <div class="col col-lg-2 col-md-3sidebar-block">
      <vr-list [modules]="availableModules | async" (vrModuleSelected)="onVrModuleSelected($event)"></vr-list>
    </div>
    <div class="col col-lg-10 col-md-9 three-dee-area">
      <router-outlet></router-outlet>
    </div>
  </div>
</div>

brakmic

  /**
   * Click handler for vr module selections (sidebar on the left)
   * Check app.routes.ts for more info on angular2 routing
   * 
   * @private
   * @param {*} event
   */
  private onVrModuleSelected(event: any) {
    const params = {
      id: event.module.id

brakmic

export const APP_ROUTES: Routes = [
  { path: '',
        children: [
          { path: '', loadChildren: './shared/wrapper#VrWrapperModule' },
          { path: ':area', loadChildren: './shared/wrapper#VrWrapperModule' }
        ]
  }
];

brakmic

import { Routes } from '@angular/router';
import { VrWrapperComponent } from './wrapper.component';

export const WRAPPER_ROUTES: Routes = [
  { path: '',
    component: VrWrapperComponent
  }
];

brakmic

// Each time the route changes take the ID and instantiate the appropriate vr element.
// If the element contains a script-array load them too.
// Check shared/directives/vr-element.directive.ts for more info regarding 
// dynamic instantiation of vr elements.
this.routeSubscription = this.route.params.subscribe((params) => {
  const id = params['id'];
  const mod = _.find(this.availableModules, (m) => m.id === id);
  if (!_.isNil(mod)) {
    this.dynamicComponent = {
      html: mod ? mod.markup : undefined,

brakmic

<vr-element [dynamicComponent]="dynamicComponent"></vr-element>

brakmic

 const body = document.getElementsByTagName('body')[0];
// if the markup has changed remove the existing vr-module scripts first
Promise.resolve(_.each(this.activeScripts, (script, index) => {
  const oldNode = body.removeChild(document.getElementById(this.vrScriptPrefix + index));
})).then(() => {
   // clean up the view-container reference...
   this.activeScripts = [];
   _.each(cmp.scripts, (script, idx) => {
         this.appendScript(body, script, Number(idx))
   });

brakmic

export function createComponentFactory(compiler: Compiler,
                                       metadata: Component):
                                              Promise<ComponentFactory<any>> {
const cmpClass = class DynamicComponent {};
const decoratedCmp = Component(metadata)(cmpClass);

@NgModule({ 
    imports: [ CommonModule ], 
    declarations: [decoratedCmp],
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ] })