Before anyone says anything I'm aware that it's not best practice to mix Jquery and Angular2. However, I have a layout manager (golden-layout) which is reliant on Jquery. Once the individual tiles have been created, I'd like to attach an Angular 2 component that consists of charts/tables to the tile.
So I can easily get the container through the API, but it's from a jquery selection. How can I turn that into a ViewContainerRef so I can attach a component to it.
export class ComponentService { constructor(private componentFactoryResolver: ComponentFactoryResolver, private appRef: ApplicationRef, private injector: Injector) { } create(component){ // get factory and create component let factory = this.componentFactoryResolver.resolveComponentFactory(component); let ref = confirmDialogFactory.create(this.injector); // set input prop ref.instance.prop ='ABC'; // attach to dom document.querySelector('body') .appendChild(ref.location.nativeElement); // run change detection this.appRef.attachView(ref.hostView); ... }