Portal stuff

import {
    ApplicationRef,
    ComponentFactoryResolver,
    ComponentRef,
    ElementRef,
    EmbeddedViewRef,
    Injectable,
    Injector
} from '@angular/core';

import { Observable } from 'rxjs';

import {
    Product,
    ProductStatusData,
    ProjectProductDetailedStatus,
    ServerItem
} from '@app/shared/models';

import { SharedServiceModule } from './shared-services.module';

@Injectable({
    providedIn: SharedServiceModule
})
export class ProductStatusComponentPortalService {

    constructor(
        private componentFactoryResolver: ComponentFactoryResolver,
        private appRef: ApplicationRef,
        private injector: Injector,
    ) { }

    data: ProductStatusData;
    parsedElementToAppend: HTMLElement;
    elementToAppend: ComponentRef<{}>;

    getConfig() {
        return this.data;
    }

    appendComponentToBody(
        component,
        row: Product,
        productDetailedStatus$: Observable<ServerItem<ProjectProductDetailedStatus>>,
        isInModal: boolean,
        e: ElementRef
    ) {
        if (this.elementToAppend) {
            this.detachComponent();
        }

        const buttonDimensions = (<HTMLElement>e.nativeElement).getBoundingClientRect();

        this.elementToAppend = this.componentFactoryResolver
            .resolveComponentFactory(component)
            .create(this.injector);

        this.data = {
            row,
            productDetailedStatus$,
            x: buttonDimensions.left + buttonDimensions.width,
            y: buttonDimensions.top + window.pageYOffset,
            isInModal
        };

        this.appRef.attachView(this.elementToAppend.hostView);

        this.parsedElementToAppend = (this.elementToAppend.hostView as EmbeddedViewRef<any>)
            .rootNodes[0] as HTMLElement;

        document.getElementById('cdkPortalOutlet').appendChild(this.parsedElementToAppend);
    }

    detachComponent() {
        this.elementToAppend.destroy();
    }
}