Calculando el total con ngOnChanges

How does the current component architecture work in Angular?

To master Angular, it is critical to understand how components communicate with each other. In this case, the architecture consists of three base nodes, with ListComponent functioning as a master node. This master node manages communication between components through inputs and outputs.

1. Multi-product rendering: ListComponent uses ng-for to render multiple products.
2. Communication between components:
   • Whenever a user adds a product to the cart, ProductComponent sends a notification to ListComponent through an output.
   • ListComponent not only maintains a reference to the products in the cart, but also notifies HeaderComponent of changes via input.
   • HeaderComponent updates the shopping cart in the application side menu.

This flow ensures a reactive and efficient interaction between the components. An additional challenge has been to improve the visual appearance and calculate the total of the cart list.

How to improve the visual appearance and calculation of the total?

For a better visual presentation, simple enhancements using flex were used to organize the product image, title and price in a neater and clearer format. However, the final important goal is to show the total of the products in the cart. This can be achieved by following these steps:

How to calculate the total of the products?

By proposing a method inside HeaderComponent called CalculateTotal, you can accumulate the price of all the products in the cart. An efficient way to do this is using the reduce method in JavaScript.

calculateTotal() { return this.cart.reduce((total, product) => total + product.price, 0);}

• Accumulator: Initialized to zero and updating with the price of each product.
• Total return: This method returns the accumulated total directly.

Why avoid functions in the template?

Although string interpolation in Angular allows you to call functions directly in the template, doing so can affect the performance of the application, unless the function is a signAll. To avoid performance issues:

1. Keep processed data in the template: already preprocessed to avoid direct execution.
2. Use of signals or computed signals: Although card is not a signal and cannot be used directly as computed, it is important to manage how the total is recalculated with new data.

What is a more efficient solution?

Adopt best practices using ngOnChanges to recalculate the total when there are changes in the input:

1. Create a total variable as a signal:

total = signAll(0);

2. Using ngOnChanges: Check for changes in the input.

ngOnChanges(changes: SimpleChanges) { if (changes.cart) { this.total.set(this.calculateTotal()); } }}

• Propagation: Each change in cart recalculates the total.
• Better performance: Without executing functions in the template directly, being optimized by signals.

With this approach, Angular optimizes component interaction and improves performance by avoiding direct functions inside the template. In addition, encouraging these advanced practices ensures clean, efficient and scalable code. Remember that programming is a vast world and there are always new techniques and strategies to learn, so keep exploring and expanding your skills!