How to append html code to div element using Angular2

Question

I have a div and I have to add some html code that is in variable to that using Angular2.

import {Component,Input,ViewChild,ElementRef,OnInit} from 'angular2/core';

@Component({
    selector: 'my-view',
    template: `
    <div #myDiv>{{str}}</div>
`,
    styleUrls:['src/css/thedata.css']
})
    export class AngularComponent{
              private str = "<div class='EachWidget FL'><div class='WidgetDataParent'><div class='widgetTitleBar'></div></div></div>";

         }

I have to add str string as html in div named myDiv.

score 3 · Accepted Answer · answered Jun 28 '16 at 07:24

3

You can bind to the innerHTML attribute like this:

import {Component,Input,ViewChild,ElementRef,OnInit} from 'angular2/core';

@Component({
    selector: 'my-view',
    template: `
    <div [innerHTML]="str" #myDiv></div>
`,
    styleUrls:['src/css/thedata.css']
})
export class AngularComponent{
    private str = "<div class='EachWidget FL'><div class='WidgetDataParent'><div class='widgetTitleBar'></div></div></div>";

}

answered Jun 28 '16 at 07:24

Maximilian Riegler

22,720
4
62
71

Thanks. I have another doubt. I have added a div through innerHTML and that has a (click) function. But when I click that it's not working.`private str = "
";` – Lucifer Jun 30 '16 at 09:55
Yes, this won't work. You can only have event bindings on **real** template code. – Maximilian Riegler Jun 30 '16 at 09:56
You can however dynamically add components - have a look at this: http://blog.lacolaco.net/post/dynamic-component-creation-in-angular-2/ – Maximilian Riegler Jun 30 '16 at 09:58
Technically, innerHtml does not append, it replaces the html. – Loolooii Nov 18 '16 at 10:28
Despite OP using the wrong verb here, you can guess what he meant by looking at his code. – Maximilian Riegler Nov 18 '16 at 10:33
another way, look at this: http://alisch.me/post/Add-Component-dynamically-in-Angular-2 – Ali SadeghipourKorabaslo Jan 20 '17 at 10:39

How to append html code to div element using Angular2

1 Answers1