Angular2 provides innerHTML directive set HTML to div. By using this directive we can append and prepend HTML to div. You can download the below example source code from github


Observe below markup. The html content in myHtml variable will be the HTML content of the div
<button (click)="append()">Append</button>
<button (click)="prepend()">Prepend</button>
<div [innerHTML]="myHtml"></div>

Script - app.component.ts

Observe below component code. append and prepend functions append HTML and prepend HTML to div respectively
import { Component } from '@angular/core';
  selector: 'my-app',
  template: `
  <h2>Append or Prepend HTML to div</h2>
    <button (click)="append()">Append</button>
    <button (click)="prepend()">Prepend</button>
  <div [innerHTML]="myHtml"></div>
export class AppComponent {
  myHtml: string = '<div><i>basic initial HTML</i></div>';
  appendedHtml: string = '<div><b>this appended html</b></div>';
  prenpendHtml: string = '<div><b>this prepended html</b></div>';

  append(): void {
    this.myHtml = this.myHtml + this.appendedHtml;

  prepend(): void {
    this.myHtml = this.prenpendHtml + this.myHtml;


1 comment:

  1. The Duvet Cover Smithsonian Digitization project is the 3D scanning project of the Smithsonian Museum. Thousands of 3D models can be found to common public|most of the people|most people} for each viewing properly as|in addition to} downloading. 3D models out there vary from sports memorabilia, fossils, aquatic creatures, satellites, among many extra unique items all with a particular place in history. Additionally, Photoshop supports a number of} and Sculpteo profiles. In the preview window that seems, use the 3D camera tools to rotate, zoom, or transfer the 3D object.



Popular Posts