Appending an Angular 2 Component to a Specific DOM

Question

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.

Something here may help: http://stackoverflow.com/questions/30623825/how-to-use-jquery-with-angular2 — DeborahK, Apr 25 '17 at 21:59

score 0 · Accepted Answer · answered Apr 26 '17 at 01:32

  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);
    ...
  }

what is 'confirmDialogFactory'? – JCAguilera Jun 06 '18 at 16:42 — JCAguilera, Jun 06 '18 at 16:42

Appending an Angular 2 Component to a Specific DOM

1 Answers1