ng-armory.js

import {AfterViewInit, Component, ElementRef, Inject, Input, OnChanges, OnDestroy, OnInit, SimpleChanges} from '@angular/core';
import {ArmoryStore} from './store';
import {Provider} from 'react-redux';
import * as React from 'react';
import {ReactElement} from 'react';
import * as ReactDOM from 'react-dom';

@Component({
  selector: 'tome-armory-component',
  template: ' '
})
export class ArmoryComponent implements AfterViewInit, OnDestroy, OnChanges {

  @Input() reactComponent;
  @Input() props;

  private providerElement: ReactElement<Provider>;
  private renderedProvider: React.Component;

  constructor(@Inject(ArmoryStore) private store,
              private elementRef: ElementRef) {
  }

  public rerender(): void {
    ReactDOM.render(
      this.buildComponent(),
      this.elementRef.nativeElement,
    );
  }

  buildComponent(): any {
    return React.createElement(Provider, {store: this.store},
      React.createElement(this.reactComponent, this.props)
    );
  }

  ngAfterViewInit(): void {
    ReactDOM.render(this.buildComponent(), this.elementRef.nativeElement);
  }

  ngOnDestroy(): void {
    ReactDOM.unmountComponentAtNode(this.elementRef.nativeElement);
  }

  ngOnChanges(changes: SimpleChanges): void {
    this.rerender();
  }
}