1

I have an angular application using the following model class:

export interface Product {
  id: number;
  name: string;
  currentPrice: number;
  orders?: Order[];
  lastUpdate?: Date;
}

export interface Order {
  orderId: string;
  qty: number;
  amount: number;
}

I would like to add a note on UI when user adds an order. However, angular does not fire change detection without updating object reference of the product.

Replicated on: https://stackblitz.com/edit/ag-grid-angular-use-gridoptions-k75cr8?file=src/app/order.component.ts

"Add Order" button does not add an entry of "Product / Order updated on hh:mm:sss". "Add Order & Change reference" button adds an entry of it.

Why do I need to update reference of the model to fire change detection? (why does the order table still gets updated without triggering change detection on click of "Add Order" button)

Improve this question
5
  • Does this answer your question? Angular 8 change detection not working for mutable objects Commented Jan 24, 2022 at 15:29
  • Thanks. it answered the first question about why do I need to update reference of the model. Looks like this is how Angular works! Do you know why the order table still gets updated without triggering change detection? Commented Jan 24, 2022 at 15:34
  • You don't have change detection enabled, so the default strategy is used. This strategy checks for object mutation, which is happening in addOrder. Commented Jan 24, 2022 at 16:34
  • I believe there are two strategies - Default and OnPush. Will OnPush strategy detect this change? Commented Jan 24, 2022 at 17:18
  • 1
    No OnPush will not detect it. However, in that case, you can call ChangeDetectionRef.detectChanges() manually in the code, at the moment you want Angular to detect your updates. Commented Jan 24, 2022 at 18:41

2 Answers 2

Reset to default
2

I would like to add a note on UI when user adds an order. However, angular does not fire change detection without updating object reference of the product.

In your example Angular does run Change Detection when you click "Add Order" button, and that's why the table within OrderComponent reflects the newly added order.


"Add Order" button does not add an entry of "Product / Order updated on hh:mm:sss". "Add Order & Change reference" button adds an entry of it.

"Add Order" button doesn't add an entry because the @Input() setter associated with product is not called. Why it's not called? Because Angular performs reference check, and doesn't find any change in the property binding. So it doesn't update the binding.

In case of "Add Order & Change reference" you are changing the reference, and hence Angular will update the binding, which in turn calls the @Input setter which updates the this.notes value.


Why do I need to update reference of the model to fire change detection? (why does the order table still gets updated without triggering change detection on click of "Add Order" button)

You don't need to update the reference to trigger Change Detection when using Default ChangeDetectionStrategy. Why order table gets updated, is because of Change Detection.

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

Comments

0

Since you get the answer about reference issues that can work without updating the reference;

you can send orders as input, and you can hold the orderedDate information inside the order. Here is the updated stack blitz;

https://stackblitz.com/edit/ag-grid-angular-use-gridoptions-lmvcv4?file=src%2Fapp%2Forder.component.ts

If you still want to send the product you can update the inputs accordingly, that will work too.

Improve this answer

2 Comments

Thanks for your reply. However, it does not answer why the order table still gets updated without triggering change detection. Can you pls explain in your answer?
As I know, it's simply the reference. The order table looks for orders reference, when orders change, the table will update. It doesn't mean that reference isn't updated if angular doesn't detect it. It simply does.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.