How to check for changes with pipes? Angular text area

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>

It's `(ngModelChange)` (an event handler) not `[(ngModelChange)]` (a binding). And since the text area's `[(ngModel)]` is not bound to a value, the `ngModelChange` event will not be emitted when the content changes. — The Head Rush, Apr 10 '19 at 18:10
Why do you need `JsonPipe`? It appears that `data` is a `String`. — The Head Rush, Apr 10 '19 at 18:23
You can inject your pipe into the component class and call .transform on it to format the json inside the component class — Vinaayakh, Apr 10 '19 at 18:23
Possible duplicate of [Using Pipes within ngModel on INPUT Elements in Angular](https://stackoverflow.com/questions/39642882/using-pipes-within-ngmodel-on-input-elements-in-angular) — Ryan E., Apr 10 '19 at 18:27

score 2 · Accepted Answer · answered Apr 10 '19 at 18:28

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.

How to check for changes with pipes? Angular text area

1 Answers1