Angular 2+ update template values using pipe

Question

I am writing a checkout view of a shopping cart where an array is displayed with the items to be purchased like this:

app.component.html

<div *ngFor="let x of shoppingarray">
  <!-- Other code here... -->
</div>

I want to give the user the possibility of adding more items to the list at the last minute but somehow the total doesn't refresh even though I update the array and the subtotals.

I do update the subtotals on the array by incrementing a quantity var which affects directly the objects in the array like this:

app.component.ts

AddmoreItemsOFThistype(a) {
  this.shoppingarray[a].qt+= 1;
}

Then I recalculate each subtotal by passing each subtotal through a pipe giving as parameter the x.qt which is the incremented quantity (the pipe just multiplies x.price * x.qt).

app.component.html

<div> {{ x.price | totalPerItem: x.qt }} </div>

The problem is that the global total won't update values that have been returned from the filters.

app.component.html

<div> {{ shoppingarray | CalculateTotalpipe }} </div>

CalculateTotalpipe just loops the whole array adding all totals, somehow the initial total is correct but modifications to the subtotals don't take effect.

Is there any way to refresh shoppingarray so that CalculateTotalpipe generates an updated total?

Is there a better approach to this?

Thanks!

Do you have a variable total in your component? If you do have you bind that variable alone with [(ngModel)] in your view? — toni rmc
– toni rmc, Commented Aug 20, 2017 at 10:07
I do have one but I don't get how can I use it in combination with the filter in the view since I am extracting the global total straight from the filter that operates on the whole array {{shoppingarray|CalculateTotalpipe}} . Any suggestion on how to combine the [(ngModel)] with the var total and the filter alltogether? . I — Andrés Sanchez
– Andrés Sanchez, Commented Aug 20, 2017 at 10:29
Read angular.io/guide/pipes#pure-and-impure-pipes. You shouldn't use a pipe. Use a regular method of your component, or precompute the total every time a quantity changes. — JB Nizet
– JB Nizet, Commented Aug 20, 2017 at 10:34
Problem solved: Using pure pipes was not the right approach. After declaring pipes as Impure it was solved. Thanks a lot! — Andrés Sanchez
– Andrés Sanchez, Commented Aug 20, 2017 at 11:06
I did include one unchangeable "key": number to my array containing the base price so that every time an item is added I update the array ` AddmoreItemsOFThistype(a){ this. shoppingarray[a].price += this. shoppingarray[a].qt * this. shoppingarray[a].baseprice;}`. Then I declared the pipes as impure and that did the trick!!!! Thanks — Andrés Sanchez
– Andrés Sanchez, Commented Aug 20, 2017 at 11:23

gabriela · Accepted Answer · 2017-08-20 16:22:43Z

0

Andres be cautious with the usage of impure pipes. As it is written in the documentation:

Angular executes an impure pipe during every component change detection cycle. An impure pipe is called often, as often as every keystroke or mouse-move.

This means, every time the user will move the mouse or scroll the page your total amount will be recalculated. This will introduce performance issues.

I would advise to find another way of implementing the total without using a pipe. Why not use a simple service?

answered Aug 20, 2017 at 16:22

gabriela

2851 gold badge2 silver badges12 bronze badges

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

Collectives™ on Stack Overflow

Angular 2+ update template values using pipe

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