1

My app.component.ts has below code

  public sendData(data: any) {
    console.log(data);
  }

app.component.html has below code 

 <div type="text" contenteditable="true" (ngModelChange)="sendData($event)" [innerHTML]="childSampleData" (input)="childSampleData=$event.target.innerHTML"
    style="background-color : pink">

sendData($event) is not working with tag. ngModelChange() is not working with div tag. Whereas, if I use below code (with input tag, also it works with textArea) sendData($event) is working fine.

 <input type="text" class="form-control" value="{{ childSampleData }}" [(ngModel)]='childSampleData' (ngModelChange)="sendData($event)">

Can anyone suggest how to use ngModelChange() with div or there any other solution for achieving the same?

Pallavi
  • 33
  • 4
  • ngModelChange is used to watch the ngModel Directive fields not for Div change, for detecting Div change create a Custom directive – balajivaishnav Nov 29 '17 at 07:10

2 Answers2

1

ngModelChange fires when the model changes. You cannot use this event without ngModel directive.

NTP
  • 4,338
  • 3
  • 16
  • 24
1

By default div are not supported by ngModel. But I'm assuming that you have some requirement (eg. to have same editable and non-editable view) for not using input instead of content editable div. Still, if you want to use div.
See this answer

Ankit Kapoor
  • 1,615
  • 12
  • 18