Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
//hacked up view engine parts
import {ComponentFactory, ComponentRef} from './core/linker/component_factory';
import {ErrorHandler} from './core/error_handler';
import {Injector} from './core/di/injector';
import {NgModuleRef} from './core/linker/ng_module_factory';
import {RendererFactory2} from './core/render/api';
import {Sanitizer} from './core/security';
import {initServicesIfNeeded} from './core/view/index';
import {SimpleRendererFactory} from './core/renderer';
import {AppCompNgFactory} from './app.ngfactory';
export class AppCompHost extends HTMLElement implements Injector, NgModuleRef<any> {
private renderer2: RendererFactory2;
componentRef: ComponentRef<any>;
constructor() {
this.renderer2 = new SimpleRendererFactory();
//CE Spec
//"watch" for attribute changes
static get observedAttributes(){
return ['name']
get(token: any, notFoundValue: any = Injector.THROW_IF_NOT_FOUND): any {
switch (token) {
case RendererFactory2:
return this.renderer2;
case Sanitizer:
case ErrorHandler:
return null;
case NgModuleRef:
return this;
return Injector.NULL.get(token, notFoundValue);
//CE lifecycle callback (self bootstrap)
//CE lifecycle callback
attributeChangedCallback(key, oldValue, newValue, uri){
if(key === 'name' && newValue){ = newValue;
//externallly bootstrap
bootstrap() {
this.componentRef =
AppCompNgFactory.create(Injector.NULL, [], this, this);
//force CD
tick() { this.componentRef.changeDetectorRef.detectChanges(); }
get injector() { return this; }
get componentFactoryResolver(): any { return null!; }
get instance() { return this; }
destroy() {}
onDestroy(callback: () => void) {}
customElements.define('ng-widget', AppCompHost);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment