Add to Cart in Angular

In this Angular 12 tutorial, we will learn how to implement an add to cart functionality in an Angular application. To demonstrate this, we will use a Flipkart UI design and create a shopping cart for an e-commerce website.

Setting up the Angular Project

Before we begin, make sure you have the latest version of Angular installed on your system. You can check your Angular version by running the following command in your terminal:

ng version

If you don’t have Angular installed, you can install it by running the following command:

npm install -g @angular/cli

Once you have Angular installed, you can create a new Angular project by running the following command:

ng new shopping-cart

After the project is created, navigate to the project directory by running:

cd shopping-cart

Creating the Shopping Cart Components

Now, let’s create the components needed for our shopping cart. Run the following command to generate a new component:

ng generate component product

This will generate a new product component under the src/app folder. Repeat this process to generate components for cart, checkout, and confirmation.

Implementing the Add to Cart Functionality

Open the product.component.html file and add the HTML markup for displaying the product details, such as the product name, price, and an “Add to Cart” button. You can use HTML and Angular interpolation to bind the dynamic data.

<h2>Product Details</h2>
<div class="product">
  <h3>{{ product.name }}</h3>
  <p>Price: {{ product.price }}</p>
  <button (click)="addToCart()">Add to Cart</button>
</div>

Next, open the product.component.ts file and define the product details in the component class:

import { Component } from '@angular/core';

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent {
  product = {
    name: 'Example Product',
    price: 24.99
  };

  addToCart() {
    // Implement add to cart functionality here
  }
}

Inside the addToCart() method, you can implement the logic to add the product to the shopping cart. This can be done by creating a cart service and using dependency injection to access the service methods.

Updating the Cart Component

In the cart.component.html file, you can use HTML and Angular directives to display the products added to the cart. You can iterate over the cart items using *ngFor directive and display the product details.

<h2>Shopping Cart</h2>
<div *ngFor="let item of cartItems" class="cart-item">
  <h3>{{ item.name }}</h3>
  <p>Price: {{ item.price }}</p>
</div>

The cartItems property is a variable in the cart component that stores the list of products added to the cart. This can be populated by the add to cart functionality.

Final Thoughts

Congratulations! You have successfully implemented the add to cart functionality in Angular. With this knowledge, you can now create a fully functional shopping cart for your e-commerce website using Angular.

Remember to style your components using CSS or any CSS framework of your choice to improve the visual appearance of your shopping cart.

Happy coding!