#How can I re-write this Angular code so it matches Angular 17 style

9 messages · Page 1 of 1 (latest)

limber tartan
#

Hi, I want to update this angular 16 style code to angular 17. How should I re-write addLine, updateQuantity and removeLine methods?
`import {Injectable, Signal, WritableSignal, computed, signal}
from "@angular/core";
import {Product} from "./product.model";

@Injectable()
export class Cart {
private linesSignal: WritableSignal<CartLine[]>;
public summary: Signal<CartSummary>;

constructor() {
this.linesSignal = signal([]);
this.summary = computed(() => {
let newSummary = new CartSummary();
this.linesSignal().forEach(l => {
newSummary.itemCount += l.quantity;
newSummary.cartPrice += l.lineTotal;
});
return newSummary;
})
}

get lines(): Signal<CartLine[]> {
return this.linesSignal.asReadonly();
}

addLine(product: Product, quantity: number = 1) {
// this.linesSignal.update(linesArray => {
// let line = linesArray.find(l => l.product.id == product.id);
// if (line != undefined) {
// line.quantity += quantity;
// } else {
// linesArray.push(new CartLine(product, quantity));
// }
// return linesArray;
// });
this.linesSignal.update(linesArray => [...linesArray, new CartLine(product, quantity)]);
}

updateQuantity(product: Product, quantity: number) {
this.linesSignal.update(linesArray => {
let line = linesArray.find(l => l.product.id == product.id);
if (line != undefined) {
line.quantity = Number(quantity);
}
return linesArray;
});
}

removeLine(id: number) {
this.linesSignal.update(linesArray => {
let index = linesArray.findIndex(l => l.product.id == id);
linesArray.splice(index, 1);
return linesArray;
});
}

clear() {
this.linesSignal.set([]);
}
}

export class CartLine {

constructor(public product: Product,
public quantity: number) {
}

get lineTotal() {
return this.quantity * (this.product.price ?? 0);
}
}
`

clever mica
#

Why do you think there would be a difference?

limber tartan
clever mica
#

OK. Then ask about that. The style of Angular 17 code is no different from the style of Angular 16. And there's a good chance that the code was already incorrect in Angular 16, since nothing has changed since then with signals and computed.
So, post a complete minimal repro as a stackblitz, tell precisely what you're doing, what you expect to happen, and what happens instead.

limber tartan
# clever mica OK. Then ask about that. The style of Angular 17 code is no different from the s...

nevermind I am too lazy to create an account and link it with my github. I will figure it out on my own. But the bottom line. I have this cart component and a cart detail component which displays the items I have in the cart.
Some of the issues I have found for example are: if I add an item 2 times, rather than increment the same item, it will add it on a new line in the cart appearing as if I added 2 different items.
Another issue is that when incrementing the quantity of a product the total price of the product is updated but not the total of the cart. and need to go back to the page with the products for the cart total to be updated.

#

Another issue is, if you look into the addLine method, the commented lines would not update cart icon/would not show how many items you added but the non-commented lines does.

#

this is why I assume it's something related to how signals are written.

desert dust
#

I strongly recommend you to stay up to date … but , before updating your app making sure if there were improvements related to this signals methods … otherwise, it could be a problem with your logic