3

I'm using angular 2.0.0-rc.2,

My view is like following:

<div *ngFor="let kp of defltPge;let i=index" class="col-sm-4">
    <div class="iii" [innerHtml]="kp['content']"></div>
</div>

Value of defltPge logic is following

let tt4 = require('./dashStatic/tab-chat.html');
let tt5 = require('./dashStatic/tabs.html');
defltPge:[
    {
      "content":tt5
    },
    {
      "content":tt4
    }];

HTML are as follows:

tab-chat.html

<div class="item-remove-animate item-avatar item-icon-right item item-complex item-right-editable" *ngFor="let chat of chats">
      <a class="item-content">
        <img src="img/ben.png" src="img/ben.png">
        <h2 class="ng-binding">{{chat.name}}</h2>
        <p class="ng-binding">{{chat.lastText}}</p>
        <i class="fa fa-chevron-right"></i>
      </a>
    </div>

tabs.html

<h1>
    Dashboard
  </h1>

but tab-chat.html is not rendering correctly it just shows uncompiled code as following:

{{chat.name}}
{{chat.lastText}}
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
Akhilesh Kumar
  • 9,085
  • 13
  • 57
  • 95

1 Answers1

0

Angular2 doesn't process bindings in HTML that is added dynamically [innerHtml]=... or element.appendChidl() or similar.

Angular2 only processed HTML added to component templates statically.

You can add components dynamically using ViewContainerRef.createComponent(). Angular 2 dynamic tabs with user-click chosen components shows an example.

Community
  • 1
  • 1
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • Can you give me an example how to use it in my case..? – Akhilesh Kumar Jun 20 '16 at 05:01
  • If `tabs-chat.html` is the HTML you want to add dynamically, you need to create a new component that contains this HTML in the template. With `ViewContainerRef.createComponent()` you can add this component dynamically, alternatively you can use my `dcl-wrapper` component as shown in the linked answer. – Günter Zöchbauer Jun 20 '16 at 05:16
  • But the problem is defltPge length is dynamic so in your apprach How can I create no of components dynamacly? – Akhilesh Kumar Jun 20 '16 at 08:10
  • That's exactly what the linked answer demonstrates. `` where `defltPge` needs to contain the type of the component you want to instantiate (a reference to the class, a string is not enough). If you want to use binding like `{{}}` in the HTML, then you need a way to pass the data to the dynamically instantiated component. `[data]="..."` kind of binding is not supported for dynamically added components to pass data in. The linked answer contains a comment in the code how to pass data. – Günter Zöchbauer Jun 20 '16 at 08:15