Qdt-components - Angular 5 - Custom use of the Capability API methods

qdt-component.component.ts

//https://help.qlik.com/en-US/sense-developer/April2018/Subsystems/APIs/Content/CapabilityAPIs/qlik-app-interface.htm
import { Component, OnInit, ElementRef, Input } from '@angular/core';
import * as QdtComponents from 'qdt-components';
let qConfig = {
    "config": {
        "host": "",
        "secure": true,
        "port": 443,
        "prefix": "",
        "appId": ""
    },
    "connections": { 
        "vizApi": true, 
        "engineApi": false 
    }
}

@Component({
	selector: 'qdt-component',
	templateUrl: './qdt-component.component.html',
	styleUrls: ['./qdt-component.component.less']
})
export class QdtComponentComponent implements OnInit {

	@Input() Component: string;
    @Input() props: object;

    static qdtComponent = new QdtComponents(qConfig.config, qConfig.connections);

	constructor(private elementRef: ElementRef) { }

	async ngOnInit() {
        const qApp = await QdtComponentComponent.qdtComponent.qAppPromise;
        qApp.clearAll();
        console.log(qApp)
        QdtComponentComponent.qdtComponent.render(this.Component, this.props, this.elementRef.nativeElement);
	}

}