0

I've looked and can't quite find what I'm looking for. I have found examples using DynamicComponentLoader, ComponentResolver, and ComponentFactoryResolver, but have not found exactly what I'm looking for.

I'm fine with building a component with a known template (*ngFor="let obj of arr") but what about rendering the page with components stored/injected to the view/variable?

For example:

@Component({
    template : '{{html}} or <div [innerHTML]="html"></div>'
})

ngOnInit(){
    // simulate getting content from api/database
    this.html = `<div>testing <somecomponent></somecomponent></div>`;

    // ideally, get content from api/database
    // var path = 'some/path';
    // myhttpservice.get(path).subscribe((res:any)=>{
    //    this.html = res.html;
    // });
}

I can not get the above code to render "somecomponent". I've tried numerous ways using SafeHtml, ng-content, [innerHTML]="var", etc. No juicy.

Any ideas? I came across 1 post that said it wasn't possible... which I feel like is a challenge.

This type of code works, but again it's a known template inside MyComponent:

const factory = this.componentFactoryResolver.resolveComponentFactory(MyComponent);
const ref = this.viewContainerRef.createComponent(factory);

Maybe I need to override the component template (inside 'factory'), and update the local html variable?

Anyone have any ideas / solutions?

Rob
  • 14,746
  • 28
  • 47
  • 65
Joe Velez
  • 140
  • 1
  • 4
  • 1
    http://stackoverflow.com/questions/34784778/equivalent-of-compile-in-angular-2/37044960#37044960 – Günter Zöchbauer Jan 17 '17 at 16:49
  • 1
    I glanced, and looks easy enough to follow. I will run some of my own tests and report back (as time permits -- returning to work from paternity leave, etc) Thx for the comment. – Joe Velez Jan 17 '17 at 17:42
  • 1
    it took some digging and looking through exactly what was going on. i'm getting a handle on it, and it looks like it's working. A little more complicated than I initially thought. Thanks for the help! – Joe Velez Jan 19 '17 at 00:17
  • Just some notes for historical purposes. Doing `` works fine. To pass data using attributes, it looks like instead of `` I need to do `` – Joe Velez Jan 19 '17 at 17:55
  • @günter-zöchbauer if you're around I'd like some support =) If i do `` and kind of rewrite the prepareTemplate as `...prepareTemplate(this.test)` ( `...prepareTemplate(html){ return html })` ) there are 2 ``s. I can't figure out why it doesn't return properly from cache. refreshContent is being called twice (before i do anything). – Joe Velez Jan 24 '17 at 08:29

0 Answers0