Assign a method to Angular 7 two-way-binding

Question

I am filling a treeTable in Angular 7 with some values using a method. Now I want to make them editable, but I am running into the following error using two-way binding for my input-fields:

Uncaught Error: Template parse errors:
Parser Error: Unexpected token '=' at column 36 in [getColumnValue(rowData, columns, i)=$event] in ng:///AppModule/myComponent.html@32:44 ("leCellEditor>
          <ng-template pTemplate="input">
              <input pInputText type="text" [ERROR ->][(ngModel)]="getColumnValue(rowData, columns, i)" [ngStyle]="{'width':'100%'}">

At the moment I have three columns in my table where the third one should be the difference of the first two. If I enlarge one of the first two, the third one is updated (praise Angular). Now I'd like to keep that, what means, that I need to use two-way-binding (I think). Sadly I cannot really tell his problems from the error I get. My method is the following:

getColumnValue(rowData: any[], columns: any, i: number): number {
    let col = columns[i];
    let val = rowData['hours'].find(entry => entry.year === col.year && entry.month === col.month)[col.field];
    if (col.field == 'diff') {
      col = columns[i-2];
      val = rowData['hours'].find(entry => entry.year === col.year && entry.month === col.month)[col.field];
      col = columns[i-1];
      val = val - rowData['hours'].find(entry => entry.year === col.year && entry.month === col.month)[col.field];
    }
    return val;
  }

In my HTML:

<tr *ngIf="rowData.hours">
      <td *ngFor="let col of columns; index as i" style="height: 40px">
      <p-treeTableCellEditor>
          <ng-template pTemplate="input">
              <input pInputText type="text" [(ngModel)]="getColumnValue(rowData, columns, i)" [ngStyle]="{'width':'100%'}">
          </ng-template>
          <ng-template pTemplate="output">{{getColumnValue(rowData, columns, i)}}</ng-template>
      </p-treeTableCellEditor>
      </td>
    </tr>

How can I assign a method to that input-field?

Edit:

After editing the code to this:

HTML:

   <tr *ngIf="rowData.hours">
        <td *ngFor="let col of columns; index as i" style="height: 40px">
            <p-treeTableCellEditor>
                <ng-template pTemplate="input">
                    <input pInputText type="text" [ngModel]="getColumnValue(rowData, columns, i)" (ngModelChange)="setColumnValue(rowData, columns, i, $event)" [ngStyle]="{'width':'100%'}">
                </ng-template>
                <ng-template pTemplate="output">{{getColumnValue(rowData, columns, i)}}</ng-template>
            </p-treeTableCellEditor>
          </td>
    </tr>

And in my component:

setColumnValue(rowData: any[], columns: any[], i: number, text: string) {
    let col = columns[i];
    rowData['hours'].find(entry => entry.year === col.year && entry.month === col.month)[col.field] = Number(text);
  }

  getColumnValue(rowData: any[], columns: any, i: number): number {
    let col = columns[i];
    let val;
    if (col.field == 'diff') {
      col = columns[i-2];
      val = rowData['hours'].find(entry => entry.year === col.year && entry.month === col.month)[col.field];
      col = columns[i-1];
      val = val - rowData['hours'].find(entry => entry.year === col.year && entry.month === col.month)[col.field];
    } else {
      val = rowData['hours'].find(entry => entry.year === col.year && entry.month === col.month)[col.field];
    }
    return val;
  }

I am now getting the following error:

TimeplannerComponent.html:31 ERROR Error: StaticInjectorError(AppModule)[TreeTableCellEditor -> TTEditableColumn]: 
  StaticInjectorError(Platform: core)[TreeTableCellEditor -> TTEditableColumn]: 
    NullInjectorError: No provider for TTEditableColumn!

Although missing some styles & the treeTableToggler , I tried to set up a Stackblitz example

Answer 1

You can't, but what you should be able to do is use the event emitter. Something like this.

<input pInputText type="text" [ngModel]="getColumnValue(rowData, columns, i)" (ngModelChange)="setColumnValue(rowData, columns, i, $event)">

Stackblitz example

Note : The error you are getting refers to a missing directive. If you check the documentation you'll notice in the editing section that you need the ttEditableColumn directive:

<td *ngFor="let col of columns; index as i" style="height: 40px" ttEditableColumn>