Here I am facing an issue.
Below is my JSON data:
data = [{
'id':1,'name': 'mr.x',
},{
'id':2,'name': 'mr.y',
},{
'id':3,'name': 'mr.z',
},{
'id':4,'name': 'mr.a',
}]
I am displaying this in the template.
<div *ngFor="let x of info; let i = index">
<div id="{{x.id}}">
<div id="{{x.id}}">
</div>
<span [contentEditable]="content" id="{{x.id}}" > {{x.name}}</span>
<button id="edit" (click)="edit(x.id)">edit
</button>
What I am trying to achieve is, for each span element where {{x.name}} is displayed, I want to be able to change that name. So, I have implemented the following function:
edit(id){
this.content = true;
}
However, it's not working and nothing is editable. My current issues are how can I make it editable based on a click event and how can I get the value of the span to display changes, which need to be sent to the server for processing.
Link to my stack: