How can I inject an AngularJS 2 component dynamically in JQuery?

Question

I have an Angular2 application and consumes JQuery in some parts of the application. A sample code is below:

$(function(){
    var id = 'post349';
    var data = 'The quick brown fox...';
    $('<div><angular-test></angular-test></div>').attr('id',id).addClass('myclass').html(data).appendTo('#records_wrapper');
    // Looking for the AngularJS 2.0 API to dynamically inject <angular-test> component.
});

#records_wrapper {
    background-color:red;
    border:4px solid orange;
}

#records_wrapper div {
    background-color:green;
}

.myclass {
    border:2px solid yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="records_wrapper"></div>

The <angular-test> is a sample angular component. The problem that I'm facing is component does not expands to it's component which means it is not processed, so it stay as <angular-test></angular-test> in the DOM.

How can I inject an Angular2 component called <angular-test> dynamically after the DOM is manipulated by JQuery? What Angular API I should use?

PS. In the example I have not included the code for the angular component.

Answer 1

I realize this question is 10 months old but I'll post this just in case anyone else lands here... I was recently having a similar problem getting Angular 2 to work with a third party js library where I needed to add an Angular component to the third party lib via html strings. I eventually found this answer to a similar question and it solved my problem.

Radim gives an excellent explanation of how to dynamically load components, but I ended up modifying his code slightly to show the component loading a little clearer.

I only changed the dynamic.component.holder file to have a button that loads the component with the addComponent() function like so... Check out this plunker for all the code.

import {Component,OnInit} from '@angular/core';
import {ComponentResolver,ViewChild,ViewContainerRef} from '@angular/core';
import {FORM_DIRECTIVES} from "@angular/common";

import { IHaveDynamicData, CustomComponentBuilder } from './custom.component.builder';

@Component({
  selector: 'dynamic-holder',
  template: `
<div>
  <h1>Dynamic content holder</h1>
  <hr />
  <div #dynamicContentPlaceHolder></div>
  <hr />
  change description <input [(ngModel)]="entity.description" style="width:500px" />
  <button (click)="addComponent()">Add Component</button>
</div>
`,
  providers: [CustomComponentBuilder], 
}) 
export class DynamicHolder implements OnInit
{  
    public entity: { description: string };
    dynamicComponent: IHaveDynamicData;

    // reference for a <div> with #
    @ViewChild('dynamicContentPlaceHolder', {read: ViewContainerRef}) 
    protected dynamicComponentTarget: ViewContainerRef;

    // ng loader and our custom builder
    constructor(
        protected componentResolver: ComponentResolver,
        protected customComponentBuilder: CustomComponentBuilder
    ) 
    {}

    public ngOnInit(){
      // just init the entity for this example
      this.entity = { 
        description: "The description of the user instance, passed as (shared) reference" 
      };


      // dynamic template built (TODO driven by some incoming settings)
      var template = this.customComponentBuilder
        .CreateTemplate();

      // now we get built component, just to load it
      this.dynamicComponent = this.customComponentBuilder
        .CreateComponent(template, FORM_DIRECTIVES);
    }

    public addComponent() {
      // we have a component and its target
      this.componentResolver
        .resolveComponent(this.dynamicComponent)
        .then((factory: ng.ComponentFactory<IHaveDynamicData>) =>
        {
            // Instantiates a single {@link Component} and inserts its Host View 
            //   into this container at the specified `index`
            let dynamicComponent = this.dynamicComponentTarget.createComponent(factory, 0);

            // and here we have access to our dynamic component
            let component: IHaveDynamicData = dynamicComponent.instance;

            component.name = "The name passed to component as a value";
            component.entity = this.entity; 
        });
    }
}    

Answer 2

Why you are using jquery to create an element use angular way.

var newDirective = angular.element('<div d2></div>');
element.append(newDirective);
$compile(newDirective)($scope);