How can I render static Angular components from data in Angular 2?

Question

As expected, in Angular 2 I can create components and if I use them inside a template, they will render. In this code, "text" is the selector on another component and it works as expected if I pass some string into [value]:

@Component({
      selector: 'my-app',
      template: `
        <div class="main">
          <text [value]="testModel.data.value"></text>
        </div>
        `
    })
export class AppComponent  { 
  name = 'Angular Example';
  testModel = {
    data: {
      value: `Regular string text works fine.`
    }
  }
}

But what I need is to pass string html data into a component and that data can also contain an angular component, something more like this:

@Component({
          selector: 'my-app',
          template: `
            <div class="main">
              <text [value]="testModel.data.value"></text>
            </div>
            `
        })
    export class AppComponent  { 
      name = 'Angular Example'; 
      testModel = {
        data: {
          value: `<b>Some</b> 
                text value to 
                <inner-component> 
                     this component gets ignored when text is rendered
                </inner-component>
                render
                `
        }
      }
    }

I have seen other answers for dynamically generating components, but I don't need that, just static pre-defined components that I have already created that might exist inside my data strings.

Here is the text component:

 import { Component, Input, ViewChild } from '@angular/core';

 @Component({
  selector: 'text',
      template: `
        <div >
            <div  [innerHtml]="value">loading...</div>
        </div>
        `
    })
    export class TextComponent  { 
      @Input() value: string;
    }

Ideally the string I pass in would have any html rendered as well as any Angular rendered. Here is what I mean in angular 1: https://plnkr.co/edit/FacA3AwOqJA2QARK28c8?p=preview

Edit: Not A Duplicate

I don't see how this plunk is an answer: http://plnkr.co/edit/wh4VJG?p=preview

Is there a reason why you don't want to add it as a child component? — Stubbies, Dec 29 '16 at 00:18
I am open to any way to do it, as long as it can be found anywhere in my html string and even more than once.. — jssayin, Dec 29 '16 at 00:23

score 0 · Answer 1 · edited May 23 '17 at 11:46

"I have seen other answers for dynamically generating components, but I don't need that, just static pre-defined components that I have already created that might exist inside my data strings."

Even for that just static pre-defined component , Angular need's to compile it, otherwise it would be considered as a normal html tag.

in your html

   <inner-component> 
                 this component gets ignored when text is rendered            
   </inner-component>

The innerHtml directive just replaces the inner html of the element with the provided html, but it's not gonna compile it , so who's gonna take care of compiling your inner-component ?

Because of that, you need to find a way to dynamically compile that html piece .

You should find your way up in

How can I use/create dynamic template to compile dynamic Component with Angular 2.0?

Equivalent of $compile in Angular 2

and a working example is http://plnkr.co/edit/wh4VJG?p=preview

Thanks but those are the other answers I was talking about. I made this angular 1 example of what I am looking for: https://plnkr.co/edit/FacA3AwOqJA2QARK28c8?p=preview — jssayin, Dec 29 '16 at 15:48
@jssayin , dude , you're using $scope.eval !!!! , There is no such a thing in Angular2 , there is only one way and that's following above links , — Milad, Dec 29 '16 at 20:49

How can I render static Angular components from data in Angular 2?

1 Answers1