by Sai gowtham

How to bind an HTML in Angular

In this tutorial, we are going to learn about binding a raw html in angular with the help of an example.

Angular offers us property binding syntax([property]="expression") by using that we can bind an html in angular.

Binding Html

Let’s see an example.

app.component.ts
import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  someHtml= "<h1>Hello angular</h1><p>good to see</p>";}
app.component.html
<div style="text-align:center">
    <div [innerHtml]="someHtml"></div></div>

In the above code, we have bind a div innerHtml property to a someHtml expression so that we can see the real html.

angular binding html

Top Udemy Courses

JavaScript - The Complete Guide 2020 (Beginner + Advanced)
JavaScript - The Complete Guide 2020 (Beginner + Advanced)
45,614 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
284,472 students enrolled
40 hours of video content
View Course
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
130,921 students enrolled
48.5 hours of video content
View Course