Merge pull request #1606 from l-lin/fix-1605

fix(1605): remove duplicate templateref contents when navigating pages

Author: l-lin

demo/src/app/advanced/using-ng-template-ref.component.spec.ts

@@ -75,4 +75,26 @@ describe('UsingNgTemplateRefComponent', () => {
 
   });
 
+  it('should not have duplicate contents in ngTemplateRef column when navigating pages', async () => {
+    await fixture.whenStable();
+    fixture.detectChanges();
+
+    const query = fixture.debugElement.query(By.directive(DataTableDirective));
+    const dir = query.injector.get(DataTableDirective);
+    expect(dir).toBeTruthy();
+
+    // trigger pagination events
+    (await dir.dtInstance).page(2).draw(false);
+    await fixture.whenRenderingDone();
+
+    (await dir.dtInstance).page(0).draw(false);
+    await fixture.whenRenderingDone();
+    fixture.detectChanges();
+
+    // verify no duplication
+    const firstRow = fixture.debugElement.query(By.css('tbody'));
+    const templatedCell = firstRow.children[0].children[3];
+    expect(templatedCell.children.length).toBe(1);
+  });
+
 });

src/angular-datatables.directive.ts

@@ -126,6 +126,8 @@ export class DataTableDirective implements OnDestroy, OnInit {
       // get <td> element which holds data using index
       const i = columns.findIndex(e => e.data === el.data);
       const cellFromIndex = row.childNodes.item(i);
+      // reset cell before applying transform
+      $(cellFromIndex).html('');
       // render onto DOM
       // finalize context to be sent to user
       const _context = Object.assign({}, context, context?.userData, {