Stop Using Subjects! Build Cart Logic with Angular Signals | Angular tutorial
In this video, I will teach you how to use angular signal and create cart system using angular signal
1.what is signal
2.set() method
3.effect() method
4.computed() method
In this tutorial, you learn how to create a new angular project, how to create the component in the cmd line, or how to define router links and router outlets and how to use or create service. also you learn about localstorage.
what is signal, how to use angular, why use signal without using rxjs
This video provides a beginner-friendly tutorial on using Angular Signals to build a shopping cart system (0:20-0:35). The project demonstrates how to implement a cart without relying on RxJS or BeSubject (0:35-0:38).
The tutorial covers:
Project Overview: The application consists of product and cart components. The product page displays a list of six items, each with an "add to cart" button. Adding products updates the cart count in the navbar (1:10-1:51). The cart page shows added products with their names, prices, and quantities. Users can increase, decrease, or remove items, and the total amount updates automatically. Cart data is stored in local storage to persist even after page refreshes (1:54-2:45).
Project Setup: The project uses Angular 20.3.6. It involves creating a new Angular project using ng new and generating cart, navbar, and product components, along with a cart service (2:52-3:25).
Routing and Components: Routes are set up for the product and cart components in app-routes.ts (3:32-3:45). The app.html imports the navbar and uses a router-outlet to display content (3:50-4:01). The navbar provides navigation links to the product and cart pages (4:10-4:39). The product component displays products from an array and includes an "add to cart" button that calls a function in the cart service (4:46-5:45). The cart component lists items, manages quantity, and calculates the total (5:51-6:16).
Angular Signals Implementation: The core logic resides in the cart.service.ts file (6:21-6:30).
signal(): Used to declare a signal to store cart items, initialized by loading data from local storage (6:43-7:51).
set(): This method is used to update the signal's value, for example, when adding or updating product quantities in the cart (8:56-9:06).
effect(): Automatically runs whenever a signal changes. It's used here to update local storage and recalculate totals when items are added, removed, or quantities change (9:12-9:41).
computed(): Recalculates its value whenever its dependent signals change. It's used to calculate the total price, which updates automatically with product quantity changes or item additions/removals (9:43-10:14).
The video emphasizes that Angular Signals help manage cart logic in a cleaner, reactive way without RxJS (10:15-10:28).
#angular #angulartraining #angularproject #angular16 #angularcourse #angular12 #angular16 #ecommercewebsitedevelopment #responsivewebsite #javascript #typescript #angular17 #numofcode
#angular20 #angular21 #angularsignal #tutorialofangular #angularproject #learnangular #freeprojectinangular #whatisangularsignal #whatis #tutorial #github #opensource #coding #frontendcourse #frontendcourse
github link
https://github.com/sachindh97/shoppin...