How to implement 'onItemAdded'

[samuelkavin]

Hi, May i know how to use onItemAdded? Can you provide examples in documentation?

[millturnK]

I would also like to know this :-).

[millturnK]

Actually, in the doco it mentions the @Output variables - you just pass these into your own function, i.e. for 'added' output when an item is added to the cart, you could define an 'itemAdded' function in your component class, so this would be the use in the HTML: <add-to-cart [item]="getBaseCartItem(i)" [type]="'number'" [position]="'top'" (added)='itemAdded($event)'> PS This is such a helpful library, thanks!

[samuelkavin]

@millturnK thank u. How we can use entries() and get update realtime value?

[devconcept]

@samuelkavin The difference between itemCount and entries is that the first returns the number of unique items and the second all of the purchased items in the cart.

Take a look at this example:

• An user purchased a pair of shoes but when ordering it selected that it wanted two pairs, not just one (because he wanted one for him and another as a gift, for example).
• He also ordered a new TV but selected only one item this time.

In that case itemCount will return 2; one for the shoes and one for the TV. Those are the "unique items".

On the other hand entries will return 3 because you have two shoes and one TV. Those are the "total items".

[devconcept]

@millturnK The (added) output is not the same as itemAdded in the service. You could have several <add-to-cart> components at the same time in one view and they will only fire on the particular component that added the item while the itemAdded will fire every time on every component that injects the CartService as long as the service was provided at the application level as explained in the docs. Simply put, if you want to listen for global changes to the cart use the service and if you want to listen por changes on a particular <add-to-cart> component use the output event.

[devconcept]

The onItemAdded, onItemRemoved and onChange serves the same purpose, notify you of changes on the cart service. They filter events based on the type of modification that took place (addition or removal). The onChange will fire on every change, the other two are just for convenience. If you want to listen to all changes, setup a subscription on the ngOnInit lifecycle phase of your component and remove it on the ngOnDestroy phase. The source of the <cart-summary> can help you with that.

ngOnInit(): void {
    this._serviceSubscription = this.cartService.onChange.subscribe(() => {
        // React to changes here or call other methods
    });
}

ngOnDestroy(): void {
    this._serviceSubscription.unsubscribe();
}

You could use takeUntil rxjs operators for better cleanup