How do I update Angular UI with OnPush strategy without changing the @Input reference?

Question

I have a concrete component which extends an abstract class with one @Input() data. The one @Input data is used by a PrimeNG table to display rows. The PrimeNG table uses an Angular OnPush strategy.

When I push an object to the @Input data array, the change is not reflected in the UI.

If I change the reference of data after pushing an object to the array (via something like this.data = deepCopy(this.data) as Field[]), then the change is displayed in the UI.

In this case, I do not wish to change the reference of data as other components may manipulate that data and I do not wish to synchronize multiple different copies of the same data.

How can I force Angular to update the UI without changing the reference? ChangeDetectorRef.detectChanges() does not update the UI accordingly.

Abstract table class with PrimeNG table:

@Directive()
export abstract class TableComponent<T> implements OnChanges {

  @Input() data: T[];

  @ViewChild('dt') dataTable: Table; // PrimeNG table which displays rows of data

  ...
}

Concrete class with addRow() function:

@Component({
  selector: 'app-table',
  templateUrl: '...',
  styleUrls: ['...']
})
export class SomeComponent extends TableComponent<Field> implements OnInit, OnChanges {

  ...

  public addRow(): void {
    const field = {} as Field;
    field.id = 1;
    
    this.data.push(field);

    // this.changeDetectorRef.detectChanges(); // Does not update the UI
    // this.data = deepCopy(this.data) as Field[]; // Updates the UI by changing reference
  }
}

springandangular · Accepted Answer · 2021-01-13 20:15:07Z

1

I figured out a solution that causes the UI to update correctly.

Binding PrimeNG table value property to a function which returns all of the expected data resolves the issue of the UI not updating.

public addRow(): void {
    const field = {} as Field;
    field.id = 1;
    
    this.data.push(field);
}

public getData(): Field[] {
    return this.data.filter(field => field.id > 0);
}

Component template snippet:

<p-table #dt [columns]="cols"
             [value]="getData()"
             [paginator]="true"
             [paginatorPosition]="'both'"
             [rows]="10">
...

edited Jan 13, 2021 at 20:15

answered Jan 5, 2021 at 16:20

springandangular

1453 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How do I update Angular UI with OnPush strategy without changing the @Input reference?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related