I've been struggling to fix few problems with contenteditable div in Angular. The issues are as follow:

1. I've each item from the array list with its own contenteditable but the same value ref name. The problem is that every time I've been trying to submit the content to database, only the first content is not returning an empty string, the rest of the items have just been returning empty strings over and over again. I'm not sure how to fix it after browsing the Internet indefinitely.

In app.component.ts I've this:

 
@ViewChild("new_message_ref")newMessageRef?: ElementRef;
newMessage:any = ""

//This the method that should be sending message content to backend
//but only sending successfully the date
newMessage(user: any) {
  var messages = this.angFireBD.list("users/" + user.$key + "/messages");
  messages.update(this.userService.currentUserUid, {
   //and this the content I've been sending to database
    content: this.newMessageRef?.nativeElement.innerText,
    sent: new Date().toLocaleDateString()
  })
}

In app.compenent.html, I've this:

      <li *ngFor="let user of allUsers">
       <div
          #new_message_ref
          type="text"
          contenteditable="true"
          placeholder="Send a message to introduce yourself"
          [textContent]="newMessage"
          >
         </div>
          ...

          <span (click)="newMessage(user)">Send</span>
        </li>

2. The last problem is that I can't bind a variable inside the placeholder, but I can live with that right now as I'm much more concerned with the first issue:

<!-- This is my 2nd issue -->

 <div placeholder="{{myVar}}"></div>

THANK YOU!!!