I'm building messenger app using AngularJS . messagesData is an array that contains message type and message content and sent by who .
When I use this function it works perfect ,
But when I type any html code in the function the html get applied in the message box
Example :
input("<div>Hello</div>")
it creates a div inside of it the hello word but I want the whole element to appear in the message
This is the function that i'm talking about :
function dataToHtml(which){
//check if data = message
if(messagesData[which][0]=='message'){
//check if its user message or the other one
if(messagesData[which][1]=='mine'){
chatContainer.innerHTML+=
`
<div class="chat-message-box">
<div class="mine-message chat-message">${messagesData[which][2]}</div>
</div>
`
}else if(messagesData[which][1]=='other'){
chatContainer.innerHTML+=
`
<div class="chat-message-box">
<div class="other-message chat-message main-bg">${messagesData[which][2]}</div>
</div>
`
}
}
}
Use one way flow syntax property binding:
comment: string;
comment = "<p><em><strong>abc</strong></em></p>";
<div [innerHTML]="comment"></div>
From angular docs: "Angular recognizes the value as unsafe and automatically sanitizes it, which removes the tag but keeps safe content such as the element." https://angular.io/guide/security#sanitization-example