Why the format of text being returned as html format not in original ngx-quill format with attributes in angular

Question

I am currently trying to implement send message button, where user types on the editor and sends message in return I will output the message on the display like below:

The message gets sends successfully to api, but the issue is while displaying the text, It should show editor attributes but it shows this html text.

I want to display the text with its attributes but It shows attributes in the form of html. Is there a way to solve this?

chat.service.ts

add(message: string, conversationId: number){

        const requestBody = {
            message,
            conversationId
        }

        this.http.post('url', requestBody, {
            params: params
        }).subscribe((data: any) => {
            for(let i=0; i<data.result.length; i++){
                this.stringMessages.push(data.result[i])
            }
            console.log(this.stringMessages)
        })

chat.ts file

 public text = "";

sendMessage(){

    if(!this.text){
      return;
    }
    
    let cid = this.dataService.tabSelectedConvoID;

    this.chatService.add(this.text, cid);

    console.log(this.text)
    
    this.text="";
  }

html file

<div *ngFor="let message of displayMessages" >

     <div >
         <p [innerHTML]="message.message">{{message.message}}<p>
     </div>

</div>

<quill-editor [(ngModel)]="text" #editor placeholder="Type your message..."  [styles]="toolbarStyle"> </quill-editor>

Answer 1

Correct rendering using html:

<p [innerHTML]="message.message"><p>