009-Quản lý giỏ hàng Cart phía Angular Frontend-Typescript
Giới thiệu với các bạn Khóa học Udemy: viết ứng dụng web bán hàng với Java Springboot + Spring Security 6 + Angular 17:
Link khóa học, cách truy cập vào video, code, tài liệu, sơ đồ khối... ở đây bạn nhé:
https://docs.google.com/document/d/14...
Trong Angular, bạn có thể quản lý giỏ hàng bằng cách sử dụng các thành phần và dịch vụ của Angular:
-Tạo một service (ví dụ: CartService) bằng cách sử dụng lệnh ng generate service Cart.
Trong CartService, tạo một mảng (hoặc danh sách) để lưu trữ các sản phẩm trong giỏ hàng (cartItems).
Cung cấp các phương thức để thêm sản phẩm vào giỏ hàng, xóa sản phẩm khỏi giỏ hàng và lấy danh sách sản phẩm trong giỏ hàng.
-Tạo một component (ví dụ: CartComponent) bằng cách sử dụng lệnh ng generate component Cart. Trong CartComponent, inject CartService để có thể sử dụng các phương thức của service.
Sử dụng CartService để lấy danh sách sản phẩm trong giỏ hàng và hiển thị chúng trong template của CartComponent.
-Trong component hoặc template của sản phẩm, sử dụng sự kiện (ví dụ: click) để gọi phương thức addToCart(product) trong CartService.
Trong phương thức addToCart(product), thêm sản phẩm vào mảng cartItems trong CartService.
Xóa sản phẩm khỏi giỏ hàng: Trong component hoặc template của giỏ hàng, sử dụng sự kiện (ví dụ: click) để gọi phương thức removeFromCart(product) trong CartService.
Trong phương thức removeFromCart(product), tìm và xóa sản phẩm khỏi mảng cartItems trong CartService.
Hiển thị giỏ hàng:Trong template của CartComponent, sử dụng ngFor để lặp qua danh sách sản phẩm trong giỏ hàng và hiển thị thông tin của từng sản phẩm.
