Angular Bootstrap E-commerce Components
Angular E-commerce Components - Bootstrap 4 & Material Design
Note: This documentation is for an older version of Bootstrap (v.4). A
newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for
Bootstrap 5.
Go to docs v.5
Angular Bootstrap e-commerce components is a set of components which are necessary to build online stores and any other e-commerce businesses.
Required styles import
Starting with MDB Angular 8, using the following components requires importing an additional stylesheet. Add the following imports to the global
styles.scssstylesheet file.
@import "~ng-uikit-pro-standard/assets/scss/core/colors";
@import "~ng-uikit-pro-standard/assets/scss/core/variables";
@import "~ng-uikit-pro-standard/assets/scss/core/variables-pro";
@import "~ng-uikit-pro-standard/assets/scss/addons-pro/_ecommerce-pro.scss";
Product card v.1 MDB Pro component
.webp)
Shoes
Product name
Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates.
<div class="row">
<div class="col-md-4">
<!--Card-->
<mdb-card cascade="true" wider="true">
<!--Card image-->
<div class="view view-cascade overlay waves-light" mdbWavesEffect>
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/shoes%20(2).webp"
alt="">
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<mdb-card-body cascade="true" class="text-center">
<!--Category & Title-->
<h5>Shoes</h5>
<mdb-card-title>
<h4><strong><a href="">Product name</a></strong></h4>
</mdb-card-title>
<!--Description-->
<mdb-card-text>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et
voluptates.</mdb-card-text>
<hr>
<!--Card footer-->
<mdb-card-footer class="p-0">
<div class="clearfix"><span class="float-left">49$</span>
<span class="float-right">
<a data-toggle="tooltip" data-placement="top" title="Share"><mdb-icon fas icon="share-alt" class="mr-3"></mdb-icon></a>
<a class="active" data-toggle="tooltip" data-placement="top" title="Added to Wishlist"><mdb-icon fas icon="heart"></mdb-icon></a>
</span></div>
</mdb-card-footer>
</mdb-card-body>
<!--/.Card content-->
</mdb-card>
<!--/.Card-->
</div>
</div>
Product card v.2 MDB Pro component
.webp)
Category
Product name
Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates.
<div class="row">
<div class="col-md-4">
<!--Card-->
<mdb-card cascade="true" narrower="true">
<!--Card image-->
<div class="view view-cascade overlay waves-light" mdbWavesEffect>
<mdb-card-img class="waves-light" src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(5).webp"
alt=""></mdb-card-img>
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<mdb-card-body cascade="true" class="text-center">
<!--Category & Title-->
<h5>Category</h5>
<mdb-card-title>
<h4 class="card-title"><strong><a href="">Product name</a></strong></h4>
</mdb-card-title>
<!--Description-->
<mdb-card-text class="card-text">Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus
saepe eveniet
ut et voluptates.
</mdb-card-text>
<hr>
<!--Card footer-->
<mdb-card-footer class="p-0">
<div class="clearfix"><span class="float-left">49$</span>
<span class="float-right">
<a class="" data-toggle="tooltip" data-placement="top" title="Quick Look"><mdb-icon far icon="eye" class="mr-3"></mdb-icon></a>
<a class="" data-toggle="tooltip" data-placement="top" title="Add to Wishlist"><mdb-icon fas icon="heart"></mdb-icon></a>
</span></div>
</mdb-card-footer>
</mdb-card-body>
<!--/.Card content-->
</mdb-card>
<!--/.Card-->
</div>
</div>
Product card v.3 MDB Pro component
Category
Product name
Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates.
<div class="row">
<div class="col-md-4">
<!--Card-->
<mdb-card cascade="true">
<!--Card image-->
<div class="view view-cascade overlay waves-light" mdbWavesEffect>
<mdb-card-img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/belt.webp" alt=""></mdb-card-img>
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<mdb-card-body cascade="true" class="text-center">
<!--Category & Title-->
<h5>Category</h5>
<mdb-card-title>
<h4 class="card-title"><strong><a href="">Product name</a></strong></h4>
</mdb-card-title>
<!--Description-->
<mdb-card-text class="card-text">Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus
saepe eveniet
ut et voluptates.
</mdb-card-text>
<hr>
<!--Card footer-->
<mdb-card-footer class="p-0">
<div class="clearfix"><span class="float-left">49$ <span class="discount">199$</span></span>
<span class="float-right"><a class="" data-toggle="tooltip" data-placement="top" title="Add to Wishlist"><i
class="fas fa-heart"></i></a>
</span>
</div>
</mdb-card-footer>
</mdb-card-body>
<!--/.Card content-->
</mdb-card>
<!--/.Card-->
</div>
</div>
Product card v.4 MDB Pro component
.webp)
Category
Product name
Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates.
<div class="row">
<div class="col-md-4">
<!--Card-->
<mdb-card cascade="true" wider="true">
<!--Card image-->
<div class="view view-cascade overlay waves-light" mdbWavesEffect>
<mdb-card-img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(4).webp"
alt=""></mdb-card-img>
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<mdb-card-body cascade="true" class="text-center">
<!--Category & Title-->
<h5>Category</h5>
<mdb-card-title>
<h4 class="card-title"><strong><a href="">Product name</a></strong></h4>
</mdb-card-title>
<!--Rating-->
<ul class="rating">
<li><mdb-icon fas icon="star"></mdb-icon></li>
<li><mdb-icon fas icon="star"></mdb-icon></li>
<li><mdb-icon fas icon="star"></mdb-icon></li>
<li><mdb-icon fas icon="star"></mdb-icon></li>
<li><mdb-icon fas icon="star"></mdb-icon></li>
</ul>
<!--Description-->
<mdb-card-text class="card-text">Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet
ut et voluptates.
</mdb-card-text>
<hr>
<!--Card footer-->
<mdb-card-footer class="p-0">
<div class="clearfix"><span class="float-left">49$</span>
<span class="float-right">
<a data-toggle="tooltip" data-placement="top" title="Share"><mdb-icon fas icon="share-alt" class="mr-3"></mdb-icon></a>
<a class="active" data-toggle="tooltip" data-placement="top" title="Added to Wishlist"><mdb-icon fas icon="heart"></mdb-icon></a>
</span></div>
</mdb-card-footer>
</mdb-card-body>
<!--/.Card content-->
</mdb-card>
<!--/.Card-->
</div>
</div>
Product card v.5 MDB Pro component
.webp)
Shoes
Product name
Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates.
<div class="row">
<div class="col-md-4">
<!--Card-->
<mdb-card cascade="true" wider="true">
<!--Card image-->
<div class="view view-cascade overlay waves-light" mdbWavesEffect>
<mdb-card-img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/shoes%20(3).webp" alt=""></mdb-card-img>
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<mdb-card-body cascade="true" class="text-center">
<!--Category & Title-->
<h5>Shoes</h5>
<mdb-card-title>
<h4 class="card-title"><strong><a href="">Product name</a></strong></h4>
</mdb-card-title>
<!--Rating-->
<ul class="rating">
<li><mdb-icon fas icon="star"></mdb-icon></li>
<li><mdb-icon fas icon="star"></mdb-icon></li>
<li><mdb-icon fas icon="star"></mdb-icon></li>
<li><mdb-icon fas icon="star"></mdb-icon></li>
<li><mdb-icon fas icon="star"></mdb-icon></li>
</ul>
<!--Description-->
<mdb-card-text class="card-text">Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus
saepe eveniet
ut et voluptates.
</mdb-card-text>
<hr>
<!--Card footer-->
<mdb-card-footer class="p-0">
<div class="clearfix"><span class="float-left">49$</span>
<span class="float-right">
<a data-toggle="tooltip" data-placement="top" title="Add to Cart"><mdb-icon fas icon="shopping-cart" class="mr-3"></mdb-icon></a>
<a data-toggle="tooltip" data-placement="top" title="Share"><mdb-icon fas icon="share-alt" class="mr-3"></mdb-icon></a>
<a class="active" data-toggle="tooltip" data-placement="top" title="Added to Wishlist"><mdb-icon fas icon="heart"></mdb-icon></a>
</span>
</div>
</mdb-card-footer>
</mdb-card-body>
<!--/.Card content-->
</mdb-card>
<!--/.Card-->
</div>
</div>
Collection cards MDB Pro component
Light version
.webp)
<!--Collection card-->
<mdb-card class="collection-card" style="width: 20rem">
<!--Card image-->
<div class="view zoom">
<mdb-card-img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/img%20(5).webp" alt=""></mdb-card-img>
<div class="stripe light">
<a>
<p>Title <mdb-icon fas icon="chevron-right"></mdb-icon></p>
</a>
</div>
</div>
<!--/.Card image-->
</mdb-card>
<!--/.Collection card-->
Dark version
<!--Collection card-->
<mdb-card class="collection-card" style="width: 20rem">
<!--Card image-->
<div class="view zoom">
<mdb-card-img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/img%20(5).webp" alt=""></mdb-card-img>
<div class="stripe dark">
<a>
<p>Title <mdb-icon fas icon="chevron-right"></mdb-icon></p>
</a>
</div>
</div>
<!--/.Card image-->
</mdb-card>
<!--/.Collection card-->
Shopping Cart Table MDB Pro component
| Product | Color | Price | QTY | Amount | |||
|---|---|---|---|---|---|---|---|
|
iPhoneApple |
White | $800 | $800 | |||
|
HeadphonesSony |
Red | $200 | $600 | |||
|
iPad ProApple |
Gold | $600 | $1200 | |||
Total |
$2600 |
||||||
<mdb-card>
<mdb-card-body>
<!-- Shopping Cart table -->
<div class="table-responsive">
<table class="table product-table">
<!-- Table head -->
<thead class="mdb-color lighten-5">
<tr>
<th></th>
<th class="font-weight-bold">
<strong>Product</strong>
</th>
<th class="font-weight-bold">
<strong>Color</strong>
</th>
<th></th>
<th class="font-weight-bold">
<strong>Price</strong>
</th>
<th class="font-weight-bold">
<strong>QTY</strong>
</th>
<th class="font-weight-bold">
<strong>Amount</strong>
</th>
<th></th>
</tr>
</thead>
<!-- /.Table head -->
<!-- Table body -->
<tbody>
<!-- First row -->
<tr>
<th scope="row">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/13.webp" alt="" class="img-fluid z-depth-0">
</th>
<td>
<h5 class="mt-3">
<strong>iPhone</strong>
</h5>
<p class="text-muted">Apple</p>
</td>
<td>White</td>
<td></td>
<td>$800</td>
<td>
<input type="number" value="2" aria-label="Search" class="form-control" style="width: 100px">
</td>
<td class="font-weight-bold">
<strong>$800</strong>
</td>
<td>
<button type="button" mdbBtn color="primary" size="sm" data-toggle="tooltip" data-placement="top" title="Remove item">X
</button>
</td>
</tr>
<!-- /.First row -->
<!-- Second row -->
<tr>
<th scope="row">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/6.webp" alt="" class="img-fluid z-depth-0">
</th>
<td>
<h5 class="mt-3">
<strong>Headphones</strong>
</h5>
<p class="text-muted">Sony</p>
</td>
<td>Red</td>
<td></td>
<td>$200</td>
<td>
<input type="number" value="2" aria-label="Search" class="form-control" style="width: 100px">
</td>
<td class="font-weight-bold">
<strong>$600</strong>
</td>
<td>
<button type="button" mdbBtn size="sm" color="primary" data-toggle="tooltip" data-placement="top" title="Remove item">X
</button>
</td>
</tr>
<!-- /.Second row -->
<!-- Third row -->
<tr>
<th scope="row">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/1.webp" alt="" class="img-fluid z-depth-0">
</th>
<td>
<h5 class="mt-3">
<strong>iPad Pro</strong>
</h5>
<p class="text-muted">Apple</p>
</td>
<td>Gold</td>
<td></td>
<td>$600</td>
<td>
<input type="number" value="2" aria-label="Search" class="form-control" style="width: 100px">
</td>
<td class="font-weight-bold">
<strong>$1200</strong>
</td>
<td>
<button type="button" mdbBtn color="primary" size="sm" data-toggle="tooltip" data-placement="top" title="Remove item">X
</button>
</td>
</tr>
<!-- /.Third row -->
<!-- Fourth row -->
<tr>
<td colspan="3"></td>
<td>
<h4 class="mt-2">
<strong>Total</strong>
</h4>
</td>
<td class="text-right">
<h4 class="mt-2">
<strong>$2600</strong>
</h4>
</td>
<td colspan="3" class="text-right">
<button type="button" mdbBtn color="primary" rounded="true">Complete purchase
<mdb-icon fas icon="angle-right" class="right"></mdb-icon>
</button>
</td>
</tr>
<!-- Fourth row -->
</tbody>
<!-- /.Table body -->
</table>
</div>
<!-- /.Shopping Cart table -->
</mdb-card-body>
</mdb-card>
Checkout panel MDB Pro component
Additional premium support
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, ea ut aperiam corrupti, dolorem.
MDB Membership
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, ea ut aperiam corrupti, dolorem.
Name on card is required
Credit card number is required
Expiration date required
Security code required
Summary
- MDBootstrap UI KIT (jQuery version) - License 6-10 poeple + unlimited projects
- $ 2000
- Premium support - 2 years
- $ 2000
- MDB Membership - 2 years
- $ 2000
- Total
- $ 2000
<mdb-card>
<mdb-card-body>
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-lg-8 mb-4">
<!-- Nav Tabs -->
<mdb-tabset #staticTabs [buttonClass]="'md-pills pills-primary font-weight-bold'" [justified]="true" [disableWaves]="true">
<!--Panel 1-->
<mdb-tab heading="1. Billing">
<div class="row">
<div class="col-12">
<form>
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-6 mb-4">
<!--firstName-->
<div class="md-form">
<label for="firstName" class="">First name</label>
<input mdbInput type="text" id="firstName" class="form-control" />
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-6 mb-2">
<!--lastName-->
<div class="md-form">
<label for="lastName" class="">Last name</label>
<input mdbInput type="text" id="lastName" class="form-control" />
</div>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
<!--Username-->
<div class="md-form input-group">
<div class="input-group-prepend" id="basic-addon1">
<span class="input-group-text" id="basic-addon1">@</span>
</div>
<input
mdbInput
type="text"
class="form-control"
placeholder="Username"
aria-describedby="basic-addon1"
/>
</div>
<!--email-->
<div class="md-form">
<label for="email" class="">Email (optional)</label>
<input
mdbInput
type="text"
id="email"
class="form-control mb-4"
placeholder="youremail@example.com"
/>
</div>
<!--address-->
<div class="md-form">
<label for="address" class="">Address</label>
<input
mdbInput
type="text"
id="address"
class="form-control mb-4"
placeholder="1234 Main St"
/>
</div>
<!--address-2-->
<div class="md-form">
<label for="address-2" class="">Address 2 (optional)</label>
<input
mdbInput
type="text"
id="address-2"
class="form-control mb-4"
placeholder="Apartment or suite"
/>
</div>
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-4">
<div class="md-form">
<mdb-select
[options]="optionsSelectCountry"
placeholder="Choose your option"
></mdb-select>
<label>Country</label>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-6 mb-4">
<div class="md-form">
<mdb-select
[options]="optionsSelectState"
placeholder="Choose your option"
></mdb-select>
<label>State</label>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-6 mb-4">
<div class="md-form">
<label for="zip">Zip</label>
<input
mdbInput
type="text"
class="form-control"
id="zip"
placeholder=""
required
/>
</div>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
<hr />
<mdb-checkbox>I accept the terms and conditions</mdb-checkbox>
<mdb-checkbox>Save this information for next time</mdb-checkbox>
<mdb-checkbox>Subscribe to the newsletter</mdb-checkbox>
<hr />
<button mdbBtn type="button" color="primary" block="true" mdbWavesEffect>
Next step
</button>
</form>
</div>
</div>
</mdb-tab>
<!--Panel 2-->
<mdb-tab heading="2. Addons">
<div class="row">
<div class="col-12">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-5 mb-4">
<img
src="https://mdbootstrap.com/img/Photos/Others/images/43.webp"
class="img-fluid z-depth-1-half"
alt="Second sample image"
/>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-7 mb-4">
<h5 class="mb-3 h5">Additional premium support</h5>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, ea ut
aperiam corrupti, dolorem.
</p>
<div class="md-form">
<mdb-select
class="colorful-select dropdown-primary"
[options]="optionsSelectPeriod"
placeholder="Choose a period of time"
></mdb-select>
<label>State</label>
</div>
<button
mdbBtn
color="primary"
type="button"
size="md"
class="mt-2"
mdbWavesEffect
>
Add premium support to the cart
</button>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
<hr class="mb-5" />
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-5 mb-4">
<img
src="https://mdbootstrap.com/img/Photos/Others/images/44.webp"
class="img-fluid z-depth-1-half"
alt="Second sample image"
/>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-7 mb-4">
<h5 class="mb-3 h5">MDB Membership</h5>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, ea ut
aperiam corrupti, dolorem.
</p>
<div class="md-form">
<mdb-select
class="colorful-select dropdown-primary"
[options]="optionsSelectPeriod"
placeholder="Choose a period of time"
></mdb-select>
<label>State</label>
</div>
<button
mdbBtn
color="primary"
type="button"
size="md"
class="mt-2"
mdbWavesEffect
>
Add MDB Membership to the cart
</button>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
<hr class="mb-4" />
<button mdbBtn type="button" color="primary" block="true" mdbWavesEffect>
Next step
</button>
</div>
</div>
</mdb-tab>
<!--Panel 3-->
<mdb-tab heading="3. Payment">
<div class="row">
<div class="col-12">
<div class="d-block my-3">
<div class="mb-2">
<input
name="group2"
type="radio"
class="form-check-input with-gap"
id="radioWithGap4"
checked
required
/>
<label class="form-check-label" for="radioWithGap4">Credit card</label>
</div>
<div class="mb-2">
<input
iname="group2"
type="radio"
class="form-check-input with-gap"
id="radioWithGap5"
required
/>
<label class="form-check-label" for="radioWithGap5">Debit card</label>
</div>
<div class="mb-2">
<input
name="group2"
type="radio"
class="form-check-input with-gap"
id="radioWithGap6"
required
/>
<label class="form-check-label" for="radioWithGap6">Paypal</label>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<div class="md-form mb-0">
<label for="cc-name123">Name on card</label>
<input
mdbInput
type="text"
class="form-control"
id="cc-name123"
placeholder=""
required
/>
</div>
<small class="text-muted">Full name as displayed on card</small>
</div>
<div class="col-md-6 mb-3">
<div class="md-form">
<label for="cc-number123">Credit card number</label>
<input
mdbInput
type="text"
class="form-control"
id="cc-number123"
placeholder=""
required
/>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3 mb-3">
<div class="md-form">
<label for="cc-expiration123">Expiration</label>
<input
mdbInput
type="text"
class="form-control"
id="cc-expiration123"
placeholder=""
required
/>
</div>
</div>
<div class="col-md-3 mb-3">
<div class="md-form">
<label for="cc-cvv123">CVV</label>
<input
mdbInput
type="text"
class="form-control"
id="cc-cvv123"
placeholder=""
required
/>
</div>
</div>
</div>
<hr class="mb-4" />
<button mdbBtn type="button" color="primary" block="true" mdbWavesEffect>
Place Order
</button>
</div>
</div>
</mdb-tab>
</mdb-tabset>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 mb-4">
<button mdbBtn type="button" color="primary" block="true" mdbWavesEffect>
Place Order
</button>
<!--Card-->
<mdb-card>
<!--Card content-->
<mdb-card-body>
<h4 class="mb-4 mt-1 h5 text-center font-weight-bold">Summary</h4>
<hr />
<dl class="row">
<dd class="col-sm-8">
MDBootstrap UI KIT (jQuery version) - License 6-10 poeple + unlimited projects
</dd>
<dd class="col-sm-4">
$ 2000
</dd>
</dl>
<hr />
<dl class="row">
<dd class="col-sm-8">
Premium support - 2 years
</dd>
<dd class="col-sm-4">
$ 2000
</dd>
</dl>
<hr />
<dl class="row">
<dd class="col-sm-8">
MDB Membership - 2 years
</dd>
<dd class="col-sm-4">
$ 2000
</dd>
</dl>
<hr />
<dl class="row">
<dt class="col-sm-8">
Total
</dt>
<dt class="col-sm-4">
$ 2000
</dt>
</dl>
</mdb-card-body>
</mdb-card>
<!--/.Card-->
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</mdb-card-body>
</mdb-card>
import { Component } from '@angular/core';
@Component({
selector: 'checkout-panel',
templateUrl: './checkout-panel.component.html'
})
export class CheckoutPanelComponent {
optionsSelectCountry = [
{ value: '1', label: 'United States' },
];
optionsSelectState = [
{ value: '1', label: 'California' },
];
optionsSelectPeriod = [
{ value: '1', label: '+6 months: 200$' },
{ value: '2', label: '+12 months: 400$' },
{ value: '3', label: '+18 months: 800$' },
{ value: '4', label: '+24 months: 1200$' },
];
}
Shopping cart MDB Pro component
<div class="container my-5">
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-12">
<mdb-card class="shopping-cart">
<mdb-card-body class="p-4">
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-lg-6">
<h3 class="mb-4 py-2 text-center font-weight-bold text-uppercase">Your products</h3>
<div class="media mb-3">
<img class="d-flex mr-3" src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/13.webp"
alt="Generic placeholder image">
<div class="media-body">
<a class="float-right">
<mdb-icon fas icon="times"></mdb-icon>
</a>
<h5 class="mt-0 font-weight-bold text-primary">iPhone Xs Max 64GB</h5>
<p class="font-weight-bold grey-text mb-2">Color: white</p>
<div class="d-flex justify-content-between">
<p class="font-weight-bold">999$</p>
<div class="def-number-input number-input safari_only mt-n05">
<button class="minus"></button>
<input class="quantity font-weight-bold black-text" min="0" name="quantity" value="1"
type="number">
<button class="plus"></button>
</div>
</div>
</div>
</div>
<div class="media mb-3">
<img class="d-flex mr-3" src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/6.webp"
alt="Generic placeholder image">
<div class="media-body">
<a class="float-right">
<mdb-icon fas icon="times"></mdb-icon>
</a>
<h5 class="mt-0 font-weight-bold text-primary">Headphones Bose 35 II</h5>
<p class="font-weight-bold grey-text mb-2">Color: red</p>
<div class="d-flex justify-content-between">
<p class="font-weight-bold">230$</p>
<div class="def-number-input number-input safari_only mt-n05">
<button class="minus"></button>
<input class="quantity font-weight-bold black-text" min="0" name="quantity" value="1"
type="number">
<button class="plus"></button>
</div>
</div>
</div>
</div>
<div class="media">
<img class="d-flex mr-3" src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/1.webp"
alt="Generic placeholder image">
<div class="media-body">
<a class="float-right">
<mdb-icon fas icon="times"></mdb-icon>
</a>
<h5 class="mt-0 font-weight-bold text-primary">iPad 9.7 6-gen WiFi 32GB</h5>
<p class="font-weight-bold grey-text mb-2">Color: rose pink</p>
<div class="d-flex justify-content-between">
<p class="font-weight-bold">655$</p>
<div class="def-number-input number-input safari_only mt-n05">
<button class="minus"></button>
<input class="quantity font-weight-bold black-text" min="0" name="quantity" value="2"
type="number">
<button class="plus"></button>
</div>
</div>
</div>
</div>
<hr class="blue-border mb-4">
<div class="d-flex justify-content-between px-2">
<p class="font-weight-bold">Discount:</p>
<p class="font-weight-bold">95$</p>
</div>
<div class="d-flex justify-content-between light-blue lighten-5 p-2">
<h5 class="font-weight-bold mb-0">Total:</h5>
<h5 class="font-weight-bold mb-0">1789$</h5>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-6">
<h3 class="mb-4 py-2 mt-lg-0 mt-4 text-center font-weight-bold text-uppercase">Payment</h3>
<form>
<!-- Medium input -->
<div class="md-form mb-5">
<input type="tel" id="inputMDEx4" class="form-control" autofocus value="1234 5678 9012 3456" mdbInput>
<label for="inputMDEx4">Card number</label>
</div>
<!-- Medium input -->
<div class="md-form">
<input type="text" id="inputMDEx3" class="form-control" autofocus value="John Smith" mdbInput>
<label for="inputMDEx3">Name on card</label>
</div>
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-6 mb-4">
<!-- Medium input -->
<div class="md-form">
<input type="text" id="inputMDEx2" class="form-control" autofocus value="04 / 23" mdbInput>
<label for="inputMDEx2">Valid thru</label>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-6 mb-4">
<!-- Medium input -->
<div class="md-form">
<input type="password" id="inputMDEx1" class="form-control" autofocus value="345" mdbInput>
<label for="inputMDEx1">CCV number</label>
</div>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
<p class="mb-5">Lorem ipsum dolor sit amet consectetur, adipisicing elit <br><a class="blue-text">obcaecati
sapiente</a></p>
<button type="button" mdbBtn color="primary" block="true" mdbWavesEffect class="mb-lg-0 mb-5">Buy now
</button>
<h5 class="font-weight-bold"><a class="blue-text back-link">
<mdb-icon fas icon="angle-left" class="mr-2"></mdb-icon>
Back to shopping</a></h5>
</form>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</mdb-card-body>
</mdb-card>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
shopping-cart-img {
width: 150px;
}
.number-input input[type="number"] {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
}
.number-input input[type=number]::-webkit-inner-spin-button,
.number-input input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
.number-input {
margin-bottom: 2rem;
}
.number-input button {
-webkit-appearance: none;
background-color: transparent;
border: none;
align-items: center;
justify-content: center;
cursor: pointer;
margin: 0;
position: relative;
}
.number-input button:before,
.number-input button:after {
display: inline-block;
position: absolute;
content: '';
height: 2px;
transform: translate(-50%, -50%);
}
.number-input button.plus:after {
transform: translate(-50%, -50%) rotate(90deg);
}
.number-input input[type=number] {
text-align: center;
}
.number-input.number-input {
border: 1px solid #ced4da;
width: 10rem;
border-radius: .25rem;
}
.number-input.number-input button {
width: 2.6rem;
height: .7rem;
}
.number-input.number-input button.minus {
padding-left: 10px;
}
.number-input.number-input button:before,
.number-input.number-input button:after {
width: .7rem;
background-color: #495057;
}
.number-input.number-input input[type=number] {
max-width: 4rem;
padding: .5rem;
border: 1px solid #ced4da;
border-width: 0 1px;
font-size: 1rem;
height: 2rem;
color: #495057;
}
@media not all and (min-resolution: .001dpcm) {
@supports (-webkit-appearance: none) and (stroke-color:transparent) {
.number-input.def-number-input.safari_only button:before,
.number-input.def-number-input.safari_only button:after {
margin-top: -.3rem;
}
}
}
.blue-border {
border-top: 2px solid #4285f4;
}
.shopping-cart .def-number-input.number-input {
border: none;
}
.shopping-cart .def-number-input.number-input input[type=number] {
max-width: 2rem;
border: none;
}
.shopping-cart .def-number-input.number-input input[type=number].black-text, .shopping-cart .def-number-input.number-input input.btn.btn-link[type=number], .shopping-cart .def-number-input.number-input input.md-toast-close-button[type=number]:hover,
.shopping-cart .def-number-input.number-input input.md-toast-close-button[type=number]:focus {
color: #212529 !important;
}
.shopping-cart .def-number-input.number-input button {
width: 1rem;
}
.shopping-cart .def-number-input.number-input button:before, .shopping-cart .def-number-input.number-input button:after {
width: .5rem;
}
.shopping-cart .def-number-input.number-input button.minus:before, .shopping-cart .def-number-input.number-input button.minus:after {
background-color: #9e9e9e;
}
.shopping-cart .def-number-input.number-input button.plus:before, .shopping-cart .def-number-input.number-input button.plus:after {
background-color: #4285f4;
}
.shopping-cart .def-number-input.number-input.mt-n05 {
margin-top: -.33rem;
}
.shopping-cart .back-link {
position: absolute;
bottom: 0;
}
Angular E-commerce Components - API
In this section you will find informations about required modules for e-commerce components.
Modules used
In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.
import { WavesModule, CardsModule, ButtonsModule, InputsModule, SelectModule, TabsModule, CheckboxModule } from 'ng-uikit-pro-standard'