JiaLiPassion

class AngularCustomElementBridge {
  destroy() {
    this.componentRef.destroy();
  }
}

JiaLiPassion

class AngularCustomElementBridge {
  setInputValue(propName, value) {
    if (!this.componentRef) {
      this.initialInputValues[propName] = value;
      return;
    }
    if (this.componentRef[propName] === value) {
      return;
    }
    this.componentRef[propName] = value;

JiaLiPassion

class AngularCustomElementBridge {
  prepare(injector, component) {
    this.componentFactory = injector.get(ComponentFactoryResolver).resolveComponentFactory(component);
    // we use templateName to handle this case @Input('aliasName');
    this.observedAttributes = componentFactory.inputs.map(input => input.templateName); 
  }
}

JiaLiPassion

@NgModule({
  imports: [
    BrowserModule
  ],
  declarations: [HelloComponent],
  entryComponents: [HelloComponent]
})
export class CustomElementsModule {
  ngDoBootstrap() {}
}

JiaLiPassion

customElements.define('hello-elem', HelloComponentClass);

JiaLiPassion

// Import stylesheets
import './style.css';

// Write Javascript code!
const appDiv = document.getElementById('app');
appDiv.innerText = 'App';
// register a event handler named 'highlight'
appDiv.addEventListener('highlight', function(event) {
  appDiv.innerText = 'App highlighted';
});

JiaLiPassion

 connectedCallback(): void {
   // subscribe to event emitters of Angular Component and dispatch Custom
   // Events
   const eventEmitters = this.componentFactory.outputs.map(propName => this.componentRef.instance as any)[propName]);
   this.outputEvents = merge(...eventEmitters);   
   this.ngElementEventsSubscription = this.outputEvents.subscribe(e => {
     const customEvent = document.createEvent('CustomEvent');
     customEvent.initCustomEvent(e.name, false, false, e.value);
     element.dispatchEvent(customEvent);
   });

JiaLiPassion

function callback() {
  // context 2
  console.log('callback invoked');
}

window.onload = function() {
  // context 1  
  setTimeout(callback, 100); 
};

JiaLiPassion

var ctx = {
  data: 'data'
};
function callback() {
  // access shared data from global variable.
  console.log('callback invoked', ctx); // will be {data: 'onload data'}
}

window.onload = function() {
  ctx.data = 'onload data';

JiaLiPassion

function callback(ctx) {
  // access shared data from args
  console.log('callback invoked', ctx); // will be {data: 'onload data'}
}

window.onload = function() {
  setTimeout(callback, 100, {data: 'onload data'});
}