ng-include or equivalent in Angular2?

[Pete Moss]

We are trying to build a metadata-driven UI for our application and we are considering using Angular2 to build it. One question we have is that we'd like to build a somewhat generic parameter-driven component whose view template is dynamically rendered by the server. 

I did a proof-of-concept in Angular1 by doing something like this:

<ng-include src="ctrl.template"></ng-include>

where ctrl.template is a controller var specifying a URL that is dynamically set in the controller. This seemed to work for me. But, I couldn't get <ng-include> to work at all for me in Angular2. Will this technique work in Angular2?

Is there any way to dynamically inject view code into an Angular2 component?

Thanks,

Pete

[Eric Martinez]

Hey Pete, sadly ng-include (or similar) won't be added https://github.com/angular/angular/issues/2753

The most you'll have is Custom Renderers

See 

https://github.com/angular/angular/issues/1807

https://docs.google.com/document/d/1M9FmT05Q6qpsjgvH1XvCm840yn2eWEg0PMskSQz7k4E/edit#

And DynamicComponentLoader (Not 100% sure about this one)

https://github.com/angular/angular/blob/448ca384ccf6268a95f534f06ec58b673ac762a0/modules/angular2/src/core/compiler/dynamic_component_loader.ts

[Pete Moss]

Eric,

That is too bad. Angular2 was looking really good for us until this snag. This may force us to revisit React, since their component life-cycle model fits very well with a metadata-driven UI. Imagine the props of a React component containing the metadata specifying the view. The render method would simply code-gen the appropriate virtual DOM tree and render it. A fairly straightforward solution. If the metadata changes, render simply re-renders the changes.

If only the Angular2 framework provided better APIs for dynamically creating content. DynamicComponentLoader is not full-featured enough, and is a bit cumbersome to even think about using except in limited cases.

Oh well. Thanks for responding.

Pete

[Jordan Ide]

I know this reply is a little late to the party, however it was one of the bigger issues that I just faced and overcame and this thread was one of the top results in google. (Though I understand we're now in a later build of Angular2)

I just managed to get a similar functionality to ng-include by using DynamicComponentLoader

import {Component, View, DynamicComponentLoader, Injector} from 'angular2/core';

//...
constructor(dynamicComponentLoader:DynamicComponentLoader, injector:Injector) {
    dynamicComponentLoader.loadAsRoot(ChildComponentName, '#TargetElementID', injector);    
}

Hope this helps anybody on the same issue. (Angular build used: Angular2.beta0)

[neuro...@gmail.com]

DynamicComponentLoader is now deprecated and doesn't fire events propely. Use  ComponentResolver with ViewContainerRef.

import { Directive , Input, OnInit, ComponentResolver,ViewContainerRef } from '@angular/core';




import { YourExternalComponent } from './yourExternal.component';

@Directive({

  selector:'[yourSelector]'

})

export class YourDirective implements OnInit{

  constructor(

    private resolver:ComponentResolver,

    private viewContainerRef:ViewContainerRef

  ){}

  ngOnInit(){

    //Magic!

    this.resolver.resolveComponent(YourExternalComponent)

    .then(cmpFactory => {

        const injector = this.viewContainerRef.injector;

        return this.viewContainerRef.createComponent(cmpFactory, 0,  injector);

    });

  }

}