maxkoretskyi

export class Ng2FrameworkComponentWrapper extends ... {
    ...
    public createComponent<T>(componentType: { new(...args: any[]): T; }): ComponentRef<T> {
        let factory = this.componentFactoryResolver.resolveComponentFactory(componentType);
        return this.viewContainerRef.createComponent(factory);
    }
}

maxkoretskyi

class BaseGuiComponent {
    protected init(params: P): void {
        this._params = params;

        this._componentRef = this.createComponent();
        this._agAwareComponent = this._componentRef.instance;
        this._frameworkComponentInstance = this._componentRef.instance;
        this._eGui = this._componentRef.location.nativeElement;

        this._agAwareComponent.agInit(this._params);

maxkoretskyi

@Component({
    selector: 'ag-grid-angular',
    ...
})
export class AgGridNg2 implements AfterViewInit {
    ...
    constructor(private viewContainerRef: ViewContainerRef,
                private frameworkComponentWrapper: Ng2FrameworkComponentWrapper,
                private _componentFactoryResolver: ComponentFactoryResolver, ...) {
        ...

maxkoretskyi

class BaseGuiComponent {
    protected init(params: P): void { ... }

    public getGui(): HTMLElement {
        return this._eGui;
    }
}

maxkoretskyi

class BaseGuiComponent {
    protected init(params: P): void {
        this._params = params;

        this._componentRef = this.createComponent();
        this._agAwareComponent = this._componentRef.instance;
        this._frameworkComponentInstance = this._componentRef.instance;
        this._eGui = this._componentRef.location.nativeElement;

        this._agAwareComponent.agInit(this._params);

maxkoretskyi

class DynamicAgNg2Component extends BaseGuiComponent {
    init(params) {
           _super.prototype.init.call(this, params);
           this._componentRef.changeDetectorRef.detectChanges();
    };
    ...
}

maxkoretskyi

class DynamicAgNg2Component extends BaseGuiComponent {
    init(params) {
           _super.prototype.init.call(this, params);
           this._componentRef.changeDetectorRef.detectChanges();
    };
    ...
}

class BaseGuiComponent {
    protected init(params: P): void {

maxkoretskyi

class BaseGuiComponent {
    protected init(params: P): void {
        this._params = params;

        this._componentRef = this.createComponent();
        this._agAwareComponent = this._componentRef.instance;
        this._frameworkComponentInstance = this._componentRef.instance;
        this._eGui = this._componentRef.location.nativeElement;

        this._agAwareComponent.agInit(this._params);

maxkoretskyi

@Component({
    selector: 'app-number-formatter-cell',
    template: `
        <span>{{params.value | currency:'EUR'}}</span>
    `
})
export class NumberFormatterComponent {
    params: any;

    agInit(params: any): void {

maxkoretskyi

class NumberCellFormatter {
    init(params) {
        const text = params.value.toLocaleString(undefined, {style: 'currency', currency: 'EUR'});
        
        this.eGui = document.createElement('span');
        this.eGui.innerHTML = text;
    }

    getGui() {
        return this.eGui;