CODEWITHSUNDEEP
javascripthtmlangulartypescriptmeteor
Rager
Rager

Reputation: 876

Meteor chatbox html is stuck in string form

I'm writing a chat box into my web app and HTML posts into the chat div are not showing like I expected them too. They are displaying in string form, I would like HTML to render in chat. Not sure why they are in string form, I'm not filtering the strings at all. How could I get the HTML to be rendered?

HTML:

<div *ngFor="let x of serverObj.values">
   <div *ngFor="let y of x.shouts">
      <p>
         <span style="font-family: initial; font-size: x-small; font-
           weight: bold;">{{y.shoutTime}}</span>
          <span style="font-size: small; font-weight: bold;">{{y.shoutUser}}</span>
            <span>: {{y.shoutContent}}</span>
          </p>
   </div>
</div>
<form name="shoutbox">
          <textarea 
            style="color: black;"
            id="shoutbox_input"
            #textArea
            (keyup.enter)="serverObj.addShout(displayName(), textArea.value)"
            (keyup.enter)="textArea.value = ''"
            ></textarea>
          <p><button id="shout_submit_button" type="button" (click)="serverObj.addShout(displayName(), textArea.value)">Sumbit</button></p>
</form>

Data Interface:

shouts: [{
    shoutUser: string;
    shoutContent: string;
    shoutTime: Date;
}];

Server Class (where shouts are being added to database):

public addShout(user: string, content: string): void{
    //setting the proper time
    function addZero(i) {
      if (i < 10) {
          i = "0" + i;
      }
      return i;
    }
    function nonMilitary(j){
      return ((j + 11) % 12 + 1);
    }
    function amPM(k){
      if(k >= 12){
        return "PM";
      }
     else return "AM";
    }
    let date = new Date();
    let hours = date.getHours();
    let time = "(" + addZero(nonMilitary(hours)) + ":" + 
     addZero(date.getMinutes()) + " " + amPM(hours) + ")";

    //TODO add id calling variable to hold the current day.
    let day = ServerData.findOne({id: "Mark"});
    ServerData.update(day._id, { $push: { shouts: { shoutUser: user, 
        shoutContent: content, shoutTime: time }}});
}

Chat OutPut:

 (11:58 AM) PizzaLord : <img src="https://www.shabboshouse.org/wp-
 content/uploads/2015/11/rocks2.jpg"/>

 (12:03 PM) PizzaLord : shout

 (12:08 PM) PizzaLord : <a href="www.google.com">Google.com website</a>

Thanks for your help.

Upvotes: 1

Views: 38

Answers (1)

Martin Parenteau
Martin Parenteau

Reputation: 73721

As explained in this article, interpolation causes the content to be escaped, and the HTML tags to be displayed as plain text.

Instead of using interpolation:

<span>: {{y.shoutContent}}</span>

you can set the innerHTML property with data binding, as shown in this stackblitz:

<span [innerHTML]="': ' + y.shoutContent"></span>

Upvotes: 1

Related Questions