如何检查管道的变化？ 角度文字区域

Question

I have a text area with formatted json. the user is allowed to make changes in that text area. However because of the json pipe I can't use [(ngmodel)} . Also (change) and (ngModelChange) don't seem to trigger anything. How do I capture the user changes?

data: string = '{"a":1,"b":2,"c":{"d":3, "e":4}}';

ngOninit(){
this.data= JSON.parse(this.data);
}

 saveUserChanges(){
 console.log(this.data)
}

HTML

<text area (ngModelChange)="saveUserChanges()">{{data | json}}</textarea>
<button (click)="saveUserChanges()">save</button>

Answer 1

You can bind the value with [ngModel] and set the new value with (ngModelChange) :

<textarea [ngModel]="data | json" (ngModelChange)="saveUserChanges($event)"></textarea>

In the component class, saveUserChanges is defined as:

saveUserChanges(value) {
  this.data = JSON.parse(value);
}

See this stackblitz for a demo.