Angular 7 Shopping Cart – Angular 7 & CodeIgniter REST API

Introduction

Angular 7 is a popular JavaScript framework for building complex web applications. In this tutorial, we will build a simple e-commerce shopping cart using Angular 7 and a CodeIgniter REST API. We will cover the steps to set up the project, create the Angular 7 shopping cart component, and consume the CodeIgniter REST API to fetch and save data.

Prerequisites

• Angular 7 installed on your machine
• CodeIgniter REST API set up on your server
• Basic knowledge of HTML, CSS, and JavaScript
• Familiarity with Angular 7 and CodeIgniter is recommended

Step 1: Set up the Angular 7 Project

• Open a terminal and run the following command to create a new Angular 7 project:

  ng new angular-shopping-cart

• Follow the prompts to choose the project name, project location, and whether to add routing and other features.

• Once the project is created, navigate to the project directory:

  cd angular-shopping-cart

  Step 2: Create the Shopping Cart Component

• Create a new directory for the shopping cart component:

  mkdir src/app/components/shopping-cart

• Create a new file called shopping-cart.component.ts inside the shopping-cart directory:

  
  // src/app/components/shopping-cart/shopping-cart.component.ts
  import { Component } from '@angular/core';

@Component({ selector: 'app-shopping-cart', templateUrl: './shopping-cart.component.html', styleUrls: ['./shopping-cart.component.css'] }) export class ShoppingCartComponent { cartItems = [];

addCartItem(item) { this.cartItems.push(item); }

removeCartItem(item) { this.cartItems = this.cartItems.filter(cartItem => cartItem!== item); } }

* Create a new file called `shopping-cart.component.html` inside the `shopping-cart` directory:

* Create a new file called `shopping-cart.component.css` inside the `shopping-cart` directory:

/ src/app/components/shopping-cart/shopping-cart.component.css / .shopping-cart { width: 300px; border: 1px solid #ccc; padding: 10px; }

**Step 3: Consume the CodeIgniter REST API**

* Create a new service to consume the CodeIgniter REST API:

// src/app/services/api.service.ts import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http';

@Injectable({ providedIn: 'root' }) export class ApiService { private apiUrl = 'http://your-server.com/api';

constructor(private http: HttpClient) { }

getItems() { return this.http.get(${this.apiUrl}/items); }

addItem(item) { return this.http.post(${this.apiUrl}/items, item); }

removeItem(item) { return this.http.delete(${this.apiUrl}/items/${item.id}); } }

* Replace `http://your-server.com/api` with the URL of your CodeIgniter REST API.

**Step 4: Use the Shopping Cart Component**

* Add the shopping cart component to the Angular 7 app:

// src/app/app.component.ts import { Component } from '@angular/core'; import { ShoppingCartComponent } from './components/shopping-cart/shopping-cart.component'; import { ApiService } from './services/api.service';

@Component({ selector: 'app-root', template: `

`, styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'Angular Shopping Cart'; constructor(private apiService: ApiService) { } ngAfterViewInit() { this.apiService.getItems().subscribe(items => { items.forEach(item => this.apiService.addItem(item)); }); } } ``` * Add the shopping cart component to the app component template. **Step 5: Run the Application** * Run the Angular 7 application: ``` ng serve ``` * Open a web browser and navigate to `http://localhost:4200` to see the shopping cart component in action. **Conclusion** In this tutorial, we have created a simple shopping cart using Angular 7 and a CodeIgniter REST API. We have covered the steps to set up the project, create the shopping cart component, and consume the CodeIgniter REST API to fetch and save data. This is just a basic example, and you can customize the shopping cart component to fit your specific needs.