How do I make my angular signal reactive?

The following markup calls removeItemFromCart in the component to remove an item from the cart:

<div>
<a class="d-block" style="color: red !important;"
(click)="removeItemFromCart(item.product._id)">
<i class="fa fa-trash">
</i>&nbsp;Remove</a>
</div>


removeItemFromCart in the component calls removeItemFromCart in the service:

public removeItemFromCart = (productId:string) => {
this.cartService.removeItemFromCart(productId)
}


This is the cart signal in CartService:

public cartSignal = signal<{ cartItems:CartItem[]}>({ cartItems:[]})


This is removeItemFromCart function in CartService:

public removeItemFromCart = (productId:string) => {
const cartItems = this.cartSignal().cartItems.filter(item => item.product._id !== productId);
this.cartSignal.set({cartItems:[...cartItems]});

saveStateToLocalStorage(this.cartSignal())
}


The removal of the item is not instantly reflected in the cart page. The target item remains on the page until the browser is refreshed.

Continue reading...