You can display Angular variable in double curly braces - {{variable}}.  Whatever variable in these double curly braces, will be displayed as text. Angular 2 provides innerHTML directive, which set HTML to the element.


Observe below markup. myHtml value displayed as both HTML and text
<div [innerHTML]="myHtml"></div>

Script - app.component.ts

Observe below code, setText(), setHtml() functions set Html and Text data. You can view the result through the template.
import { Component } from '@angular/core';
  selector: 'my-app',
  template: `
  <h2>Set Text or HTML to div</h2>
    <button (click)="setText()">Set Text</button>
    <button (click)="setHtml()">Set HTML</button>
  <div [innerHTML]="myHtml"></div>
export class AppComponent {
  myHtml: string = '<div><i>basic initial HTML</i></div>';
  text: string = 'this is sample text';
  html: string = '<div><b>this is sample html</b></div>';

  setText(): void {
    this.myHtml = this.text;

  setHtml(): void {
    this.myHtml = this.html;



Popular Posts