Angular E-Commerce Components Library

Welcome to the Angular E-Commerce Components Library! This library is designed specifically for the development of e-commerce web pages, offering a comprehensive collection of pre-designed components that are ready to use. With this library, web developers can save valuable time and effort in the process of building a feature-rich e-commerce website.

Table of Contents

• Installation
• Usage
• Components
  • Product Card
  • Search Bar
  • Shopping Cart Preview
  • Full Shopping Cart Display Page
  • Payment Summary
  • Product Details
• Demo
• Contributing
• License

Installation

To get started with the Angular E-Commerce Components Library, you can easily install it via npm:

npm install angular-ecommerce-components

Usage

Once you've installed the library, you can import and use the components in your Angular application. Make sure to include the AngularEcommerceComponentsModule in your app module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AngularEcommerceComponentsModule } from 'angular-ecommerce-components';

@NgModule({
  imports: [
    BrowserModule,
    AngularEcommerceComponentsModule,
  ],
  declarations: [YourAppComponent],
  bootstrap: [YourAppComponent],
})
export class YourAppModule { }

Components

This library provides the following pre-designed components tailored for e-commerce web development:

Product Card

The ProductCardComponent displays product information, including an image, title, price, and description.

<app-product-card [product]="yourProductData"></app-product-card>

Search Bar

The SearchBarComponent allows users to search for products easily.

<app-search-bar (search)="onSearch($event)"></app-search-bar>

Shopping Cart Preview

The ShoppingCartPreviewComponent displays a summary of items in the shopping cart.

<app-shopping-cart-preview [cartItems]="yourCartItems"></app-shopping-cart-preview>

Full Shopping Cart Display Page

The FullShoppingCartDisplayComponent provides a complete view of the shopping cart.

<app-full-shopping-cart-display [cartItems]="yourCartItems"></app-full-shopping-cart-display>

Payment Summary

The PaymentSummaryComponent shows a summary of the order, including items, quantities, and total price.

<app-payment-summary [orderDetails]="yourOrderDetails"></app-payment-summary>

Product Details

The ProductDetailsComponent displays detailed information about a product.

<app-product-details [product]="yourProductData"></app-product-details>