Rate this docs

Angular Bootstrap e-commerce components

Angular E-commerce components - Bootstrap 4 & Material Design

Angular Bootstrap e-commerce components is a set of components which are necessary to build online stores and any other e-commerce businesses.


Product card v.1 MDB Pro component

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).jpg"
          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>

        <!--Card footer-->
        <mdb-card-footer>
          <div class="clearfix"><span class="float-left">49$</span>
            <span class="float-right">
              <a data-toggle="tooltip" data-placement="top" title="Share"><i class="fa fa-share-alt mr-3"></i></a>
              <a class="active" data-toggle="tooltip" data-placement="top" title="Added to Wishlist"><i class="fa fa-heart"></i></a>
            </span></div>
        </mdb-card-footer>

      </mdb-card-body>
      <!--/.Card content-->

    </mdb-card>
    <!--/.Card-->
  </div>
</div>

                

Product card v.2 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" 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).jpg"
          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>

        <!--Card footer-->
        <mdb-card-footer>
          <div class="clearfix"><span class="float-left">49$</span>
            <span class="float-right">
              <a class="" data-toggle="tooltip" data-placement="top" title="Quick Look"><i class="fa fa-eye mr-3"></i></a>
              <a class="" data-toggle="tooltip" data-placement="top" title="Add to Wishlist"><i class="fa fa-heart"></i></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.jpg" 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>

        <!--Card footer-->
        <mdb-card-footer>
          <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="fa 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

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).jpg"
          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><i class="fa fa-star"></i></li>
          <li><i class="fa fa-star"></i></li>
          <li><i class="fa fa-star"></i></li>
          <li><i class="fa fa-star"></i></li>
          <li><i class="fa fa-star-o"></i></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>

        <!--Card footer-->
        <mdb-card-footer>
          <div class="clearfix"><span class="float-left">49$</span>
          <span class="float-right">
          <a data-toggle="tooltip" data-placement="top" title="Share"><i class="fa fa-share-alt mr-3"></i></a>
          <a class="active" data-toggle="tooltip" data-placement="top" title="Added to Wishlist"><i class="fa fa-heart"></i></a>
          </span></div>
        </mdb-card-footer>

      </mdb-card-body>
      <!--/.Card content-->

    </mdb-card>
    <!--/.Card-->
  </div>
</div>
                

Product card v.5 MDB Pro component

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).jpg" 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><i class="fa fa-star"></i></li>
          <li><i class="fa fa-star"></i></li>
          <li><i class="fa fa-star"></i></li>
          <li><i class="fa fa-star"></i></li>
          <li><i class="fa fa-star-o"></i></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>

        <!--Card footer-->
        <mdb-card-footer>
          <div class="clearfix"><span class="float-left">49$</span>
            <span class="float-right">
              <a data-toggle="tooltip" data-placement="top" title="Add to Cart"><i class="fa fa-shopping-cart mr-3"></i></a>
              <a data-toggle="tooltip" data-placement="top" title="Share"><i class="fa fa-share-alt mr-3"></i></a>
              <a class="active" data-toggle="tooltip" data-placement="top" title="Added to Wishlist"><i class="fa fa-heart"></i></a>
            </span>
          </div>
        </mdb-card-footer>

      </mdb-card-body>
      <!--/.Card content-->

    </mdb-card>
    <!--/.Card-->
  </div>
</div>
                

Collection cards MDB Pro component

Light 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).jpg" alt=""></mdb-card-img>
    <div class="stripe light">
      <a>
        <p>Title <i class="fa fa-chevron-right"></i></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).jpg" alt=""></mdb-card-img>
    <div class="stripe dark">
      <a>
        <p>Title <i class="fa fa-chevron-right"></i></p>
      </a>
    </div>
  </div>
  <!--/.Card image-->
</mdb-card>
<!--/.Collection card-->
                

Shopping Cart Table MDB Pro component

Product Color Price QTY Amount
iPhone

Apple

White $800 $800
Headphones

Sony

Red $200 $600
iPad Pro

Apple

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.jpg" 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" class="btn btn-sm btn-primary" 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.jpg" 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" class="btn btn-sm btn-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.jpg" 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" class="btn btn-sm btn-primary" 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" class="btn btn-primary btn-rounded">Complete purchase
                <i class="fa fa-angle-right right"></i>
              </button>
            </td>
          </tr>
          <!-- Fourth row -->

        </tbody>
        <!-- /.Table body -->

      </table>

    </div>
    <!-- /.Shopping Cart table -->

  </mdb-card-body>

</mdb-card>
                

Checkout panel MDB Pro component

@
Please select a valid country.
Please provide a valid state.
Zip code required.


Second sample image
Additional premium support

Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, ea ut aperiam corrupti, dolorem.


Second sample image
MDB Membership

Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, ea ut aperiam corrupti, dolorem.


Full name as displayed on card
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-tabs pills-primary white tabs-3 px-0 mx-0'">
          <!--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 mdbInputDirective 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 mdbInputDirective 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 mdbInputDirective 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 mdbInputDirective 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 mdbInputDirective 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 mdbInputDirective 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">

                      <mdb-select class="mt-3" [options]="optionsSelectCountry" placeholder="Choose your option"></mdb-select>
                      <label>Country</label>

                    </div>
                    <!--Grid column-->

                    <!--Grid column-->
                    <div class="col-lg-4 col-md-6 mb-4">

                      <mdb-select class="mt-3" [options]="optionsSelectState" placeholder="Choose your option"></mdb-select>
                      <label>State</label>

                    </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 mdbInputDirective 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.jpg" 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>

                    <mdb-select class="colorful-select dropdown-primary" [options]="optionsSelectPeriod" placeholder="Choose a period of time"></mdb-select>
                    <label>State</label>

                    <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.jpg" 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>

                    <mdb-select class="colorful-select dropdown-primary" [options]="optionsSelectPeriod" placeholder="Choose a period of time"></mdb-select>
                    <label>State</label>

                    <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 mdbInputDirective 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 mdbInputDirective 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 mdbInputDirective 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 mdbInputDirective 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$' },
  ];

}
                

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.

// MDB Angular Pro
import { WavesModule, CardsModule, ButtonsModule, InputsModule, SelectModule, TabsModule, CheckboxModule  } from 'ng-uikit-pro-standard'