OnPush change detection when using a FormArray in a service

Question

Fellow developers,

I've got a service that stores a FormArray, which is appended to by one component and viewed by a different component. Even though, the FormArray is immutable and being reassigned to, the view is not updating successfully.

The issue goes away when not using OnPush change detection, or if change detection is force refreshed using changeDetectorRef.detectChanges(). Both of these solutions feel hacky though, and I don't really understand why it's not working as it should.

Sample repo with the issue: https://stackblitz.com/edit/angular-9hwgcn?file=src/app/app.component.html (after adding an item, the list of shopping items doesn't update)

eko · Accepted Answer · 2021-05-14 15:35:27Z

2

ChangeDetectionStrategy.OnPush stops the automatic change detection as you've experienced. Its use case is primarily input/output components; it tells them to detect changes only when an @Input changes.

That being said, when I look at your code,

you don't have an @Input component
your components doesn't have parent/child relationship
you're doing a global operation

and you stop the automatic change detection. In this case you have to tell Angular that there's a change to be detected.

So no it's not hacky and yes it's working as it should.

Nevertheless, if you want to avoid all that and want your code to be more reactive you can maybe use observables/subjects. Here's an example:

export class ShoppingListService {
  shoppingListForm: BehaviorSubject<FormArray> = new BehaviorSubject(
    this.fb.array([])
  );

<ng-container *ngIf="shoppingListService.shoppingListForm | async as shoppingListForm">
  <div class="course-item" *ngFor="let shoppingListItem of shoppingListForm.controls">
    <p>{{ shoppingListItem.value | json }}</p>
  </div>
</ng-container>

Stackblitz

edited May 14, 2021 at 15:35

answered May 14, 2021 at 14:49

eko

40.8k11 gold badges79 silver badges104 bronze badges

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

1 Comment

L. Berger Over a year ago

Perfect, thanks. I'm understanding OnPush a whole lot better now.

Collectives™ on Stack Overflow

OnPush change detection when using a FormArray in a service

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related