How to get change event for td element and then add a new row?

Question

I am trying to add a new row on change of value of a column wherein I am using contenteditable=true for that particular column. Sample code is given below.

<td contenteditable="true" id="tdId" class="num" (change)="changeFunc($event)" (click)="clickFunc($event)">

I am able to get click event and row is getting added every time I click the my column. I have tried few possibilities for adding new row when user changes the value completely then my new row must be added but here on click of every input or pressing delete button row gets added as in click function I have passed input event.

In ts file I am writing like this:

changeFunc(event){
 console.log("in change func",event);
 }

 clickFunc(event){
  document.getElementById("tdId").addEventListener('change',function(e){
  console.log("inside event listener")    //Not working
 })

  $('table').on('change','td[contenteditable]',()=>{
   console.log("inside change")    //Not working
 })

  $('table').on('input','td[contenteditable]',()=>{
   console.log("inside input ")    //Working
    //I want this to execute only once user has edited the fields of td column and not on 
     every change of input or delete button
   var v1=document.getElementById("tdId");
   var tblBody=document.getElementById('newTable').getElementByTagName('tbody')[0]
   var newNode= tblBody.rows[0].cloneNode(true);
   tblBody.appendChild(newNode);
 })
 }

Sample working code added here - https://stackblitz.com/edit/angular-jquery-integration-ecw78c?file=app/app.component.html

After I change Editable Column Value 1 to Editable Column Value 02, I want new row to be added.