ng-ecommerce-components v15.1.2
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
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>
8 months ago
1 year ago