`[innerHtml]` is great option in most cases, but it fails with really large strings or when you need hard-coded styling in html.
I would like to share other approach:
All you need to do, is to create a div in your html file and give it some id:
<!-- language: html -->
<div #dataContainer></div>
Then, in your Angular 2 component, create reference to this object (TypeScript here):
<!-- language: typescript -->
import { Component, ViewChild, ElementRef } from '@angular/core'; @Component({ templateUrl: "some html file" }) export class MainPageComponent { @ViewChild('dataContainer') dataContainer: ElementRef; loadData(data) { this.dataContainer.nativeElement.innerHTML = data; } }
Then simply use `loadData` function to append some text to html element.
It's just a way that you would do it using native javascript, but in Angular environment. I don't recommend it, because makes code more messy, but sometimes there is no other option.
See also https://stackoverflow.com/questions/36265026/angular-2-innerhtml-styling

`[innerHtml]` is great option in most cases, but it fails with really large strings or when you need hard-coded styling in html.
I would like to share other approach:
All you need to do, is to create a div in your html file and give it some id:
<!-- language: html -->
<div #dataContainer></div>
Then, in your Angular 2 component, create reference to this object (TypeScript here):
<!-- language: typescript -->
import { Component, ViewChild, ElementRef } from '@angular/core'; @Component({ templateUrl: "some html file" }) export class MainPageComponent { @ViewChild('dataContainer') dataContainer: ElementRef; loadData(data) { this.dataContainer.nativeElement.innerHTML = data; } }
Then simply use `loadData` function to append some text to html element.
It's just a way that you would do it using native javascript, but in Angular environment. I don't recommend it, because makes code more messy, but sometimes there is no other option.
See also https://stackoverflow.com/questions/36265026/angular-2-innerhtml-styling