Topic: How to implement two-way binding with [conetendeditable]

Spencer LeBlanc free asked 4 years ago

Expected behavior So I'm working on a table that is meant to detect and record changes made by a user and log them but not display any changes until a higher authority commits those changes. Part of the app involves passing along said changes with JSON.parse and JSON.stringify that's nut fully fleshed otu et. The problem comes when I try to read in what in the line of this.jerb in typescript which is databound{{}} but only reads the value from the original service that's providing the fields rather than what is being typed in the field.

So I ask is there anyway to update the values in an array with what's typed in content editable span field?

HTML line in question:

<ng-container *ngFor="let j of jerb | filter : 'title' : searchString; let i = index">
<span id="textfield" [attr.contenteditable]="Editmode" (keypress)="onPreventNum($event, i)" >{{j.title}}</span>

HTML: associated buttons that enable editing

                <button *ngIf="!Editmode" type="button" mdbBtn color="info" (click)="Editlist()" mdbWavesEffect>Edit</button>
                <button *ngIf="Editmode" type="button" mdbBtn color="success" (click)="EditCommit(i,, j.title,, j.location, j.status, j.openings, j.duration)" mdbWavesEffect>Commit</button>
                <button *ngIf="Editmode" type="button" mdbBtn color="danger" (click)="EditClose()" mdbWavesEffect>Cancel</button>

Associated typescript:

Editlist(){ //Enables Editting
  EditClose(){ //closes editting mode without saving changes

  EditCommit(i, id: any, title: string, date: any, location: string, status: string, openings:                                     number, duration: string){ // closes editting mode while saving changes for admin approval and reverting to orgininal for time being

this.jerbchanges[this.counter]=JSON.parse(JSON.stringify(this.jerb[i]));//instead of erasing changes edits, commits saves the changes and passes to hidden table for admin approval


onPreventNum(event: any, i){
if (

  (event.charCode == 32 || //space
   event.charCode == 39 || //apostrophe
   event.charCode == 45 || //hyphen
   event.charCode == 46 || //period
   event.charCode >= 65 && event.charCode <= 90 ||//Capitals
   event.charCode >= 97 && event.charCode <= 122 //lowercase   

) {
  console.log("A letter or special char was entered");
  return;  // let it happen, don't do anything


Arkadiusz Idzikowski staff answered 4 years ago

Here is an example on how to update edited value on blur event. I used simple string and blur event but you can easily adjust this example to your data structure and app logic.


<span id="textfield" contenteditable="true" (blur)="onBlur($event)">{{ editableValue }}</span>


  editableValue = 'Editable value';

  onBlur(event: any) {
    this.editableValue =;

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.3.1
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No