Daniel Zarioiu Daniel Zarioiu - 2 months ago 35
TypeScript Question

How to use innerHTML in typescript code with Angular 2

How to use innerHTML from typescript code with Angular 2 RC4?
I have this problem: when an user click one specific button I want to add some precompiled html code. For example:

Typescript code

private addHTML() {
// the html go there I suppose, I don't know how to implement this part
}


HTML code

<div class="form-group row">
<label for="exampleSelect1" class="col-xs-2 col-form-label">My HTML code</label>
<div class="col-xs-10">
<button type="button" class="btn btn-primary" (click)="addHTML">ADD</button>
</div>
<hr>




Or maybe this is a wrong way. Let me know, thanks in advance.

Answer

Something like this maybe:

htmlYouWantToAdd;

private addHTML() {
    this.htmlYouWantToAdd = "<b>Some HTML you want to display</b>";
}

And your HTML:

<div class="form-group row">
<label for="exampleSelect1" class="col-xs-2 col-form-label">My HTML code</label>
<div class="col-xs-10">
    <button type="button" class="btn btn-primary" (click)="addHTML()">ADD</button>
</div>
<hr>
<div *ngIf="htmlYouWantToAdd" [innerHTML]="htmlYouWantToAdd"></div>