CODEWITHSUNDEEP
angulartypescript
Daniel Zarioiu
Daniel Zarioiu

Reputation: 175

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.

Upvotes: 1

Views: 14368

Answers (1)

Stefan Svrkota
Stefan Svrkota

Reputation: 50623

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>

Upvotes: 4

Related Questions