Clever Geek Handbook

Adding Angular 2 component to a specific DOM

Before anyone says anything, I know it is not recommended to mix JQuery and Angular2. However, I have a layout manager (golden layout) that depends on JQuery. Once the individual tiles have been created, I would like to add an Angular 2 component that consists of charts / tables for the tile.

This way I can easily get the container through the API, but this is from jquery's selection. How can I turn this into a ViewContainerRef so that I can attach a component to it.

+3


source to share


1 answer 


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


0


source






More articles:


All Articles