Add HTML to dynamic elements using angular2

Question

I need to append dynamic html in angular with in loop.

As I am trying to use in following way, but getting issue

<div class="reseipt panel panel-default" *ngFor="let goal of goals">

    <p class="panel-heading" data-toggle="collapse" data-target="
     {{'#collapse-'+ goal.Id}}">
     Goal - {{goal.Description}} {{goal.Id}}
   </p>

While try to add this code I am getting following issue:

Can't bind to 'target' since it isn't a known property of 'p'. ("ult" *ngFor="let goal of goals">

Please suggest how can I resolve this.

Thanks.

Answer 1

Try this

<div class="reseipt panel panel-default" *ngFor="let goal of goals">
            <p class="panel-heading" data-toggle="collapse" 
    [attr.data-target]="'#collapse-'+ goal.Id">Goal - {{goal.Description}} {{goal.Id}}</p>

data-target is not html5 attributes it is used by bootstrap. So Angular giving you error about it. more detail

Answer 2

Try this

<div class="reseipt panel panel-default" *ngFor="let goal of goals">

            <p class="panel-heading" data-toggle="collapse" 
[attr.data-target]="'#collapse-'+ goal.Id"> Goal - {{goal.Description}} {{goal.Id}}</p>

To tell Angular explicitly to use attribute binding, use instead above code using attr