Developer Has a question related to binding HTML in the angular component. A common question is “Can we bind API response Html in angular?” and the answer is yes we can do it.
How we can implement it?
Many times API developers bind HTML as response like they sent SVG icon as Html, they sent div with design in Html. Directly, It does not convert or consider as HTML tag.
Let’s take on example and understand this issue first.
// app.component.html
<div>{{ htmlString }}</div>
<p>
This website for developer, developer can fell free to contact for any question related to javascript.
</p>
// app.component.ts
export class AppComponent {
htmlString = `<div>
Hello Developer welcome to jsgrip.com website
</div>`
}
// Output is.
<div> Hello Developer welcome to jsgrip.com website </div>
This website for developer, developer can fell free to contact for any question related to javascript.
That’s an issue with simple interpolation with angular. Html tags are not converted or behave like as HTML in the browser. The solution also simple let’s try the solution to this problem. Here the link for this example as well click to check example
<div [innerHTML]="htmlString"></div>
<p>
This website for developer, developer can fell free to contact for any question related to javascript.
</p>InnerHTML is property of html tag we can bind with typescript variable and solve this issue.