How to use innerHTML in typescript code with Angular 2

Question

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.

Stefan Svrkota · Accepted Answer · 2016-09-17 23:13:56Z

4

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>

answered Sep 17, 2016 at 23:13

Stefan Svrkota

50.9k10 gold badges100 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Daniel Zarioiu Over a year ago

This method work but only once. If I click a second or third time it doesn't add the html. Do you have any suggestion? Thanks in advance.

Stefan Svrkota Over a year ago

@DanielZarioiu What do you mean? I just tested it - created a method that sets htmlYouWantToAdd to null, and after I call addHTML again, it works.

Daniel Zarioiu Over a year ago

Ok, there was something wrong with my code. Thanks for your solution it work very well!!

Collectives™ on Stack Overflow

How to use innerHTML in typescript code with Angular 2

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related