Change event binding with PrimeNG Components and Angular

Question

I am trying to dynamically bind the change events in the PrimeNG TreeTable, by declaring functions on my columns. The change event binding doesn't seem to work inside of TreeTable when I try to do it dynamically with my columns. I can get it to work if I declare the function on the angular component and the bind it.

https://stackblitz.com/edit/primeng-treetableedit-demo-wezv7m?file=src/app/app.component.html

 <p-treeTable [value]="files" [columns]="cols">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns">
                {{col.header}}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
        <tr>
            <td *ngFor="let col of columns; let i = index" ttEditableColumn [ngClass]="{'p-toggler-column': i === 0}">
                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treeTableToggler>
                <p-treeTableCellEditor>
                    <ng-template pTemplate="input">
                        <input pInputText type="text" [(ngModel)]="rowData[col.field]" [ngStyle]="{'width': i == 0 ? '90%': '100%'}" (change) ="col.change($event)">
                    </ng-template>
                    <ng-template pTemplate="output">{{rowData[col.field]}}</ng-template>
                </p-treeTableCellEditor>
            </td>
        </tr>            
    </ng-template>
</p-treeTable>

 ngOnInit() {
        this.nodeService.getFilesystem().then(files => this.files = files);

        this.cols = [
            { field: 'name', header: 'Name', change: (event) => console.log('Name Changed') },
            { field: 'size', header: 'Size', change: (event) => console.log('Size Changed')  },
            { field: 'type', header: 'Type', change: (event) => console.log('Type Changed')  }
        ];
    }

I can get the binding to work outside of TreeTable. Is there something about Angular Templates that I don't understand that is preventing this from working inside the Tree Table component?

https://stackblitz.com/edit/angular-ivy-z5gxtl?file=src/app/app.component.ts

A bit confused here -- the first link appears to be working, as does the last. Can you clarify what about your code example there is not working as you expect? — Nathan Beck
the event does fire in the first stack blitz, but it happens on blur, not on enter or input change. Per MDN (change) doesn't always fire when the value of an input updates --> "Unlike the input event, the change event is not necessarily fired for each alteration to an element's value." No sure what your end goal is (fire on any input value updates, fire on enter, etc), but you might try binding to a different event type like (input) instead of (change). — Nathan Beck
So what is different between my two examples? I am binding (change) on input tags in other cases. — Calidus
Functionally I see no difference -- the console.log fires in the same way in both examples. — Nathan Beck

Calidus Calidus · Accepted Answer · 2020-12-10T20:57:02

I missed some important information in the PrimeNG documentation. Looks like PrimeNG component is capturing change. I need to use 'onEditComplete' event to capture and add some additional bindings to accomplish my goal.

<td [ttEditableColumn]="rowData" [ttEditableColumnField]="col.feild">

http://primefaces.org/primeng/showcase/#/treetable

Change event binding with PrimeNG Components and Angular

1 Answers