Create Your First Ecommerce Website with Angular 15

Hello to all, welcome to therichpost.com. In this post, I will tell you, Create Your First Ecommerce Website with Angular 15.

Angular15 came and if you are new then you must check below link:

1. Angular 15 Tutorials

Here is the code snippet and please use carefully:

1. Very first guys, here are common basics steps to add angular 15 application on your machine and also we must have latest nodejs version(14.17.0) installed for angular 15:

npm install -g @angular/cli

ng new angularform // Set Angular 15 Application on your pc

cd angularform // Go inside project folder

2. Now run below commands to set bootstrap 5 modules into our angular 15 application for responsiveness (optional):

npm install bootstrap

npm i @popperjs/core

npm i bootstrap-icons

3. Now friends we just need to add below code into angularform/angular.json file (optional):

"styles": [
              ...
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/bootstrap-icons/font/bootstrap-icons.css"
          ],
"scripts": [
              ...
                "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
           ]

4. Finally we will add below code into our angularform/src/app/app.component.html file:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">Shop</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
      <li class="nav-item">
      <a class="nav-link active" aria-current="page" href="#">Home</a>
      </li>
      <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
        Categories
      </a>
      <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
        <li><a class="dropdown-item" href="#">Men</a></li>
        <li><a class="dropdown-item" href="#">Women</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Kids</a></li>
      </ul>
      </li>
      <li class="nav-item dropdown">
      <button type="button" class="btn btn-secondary position-relative" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">
        <i class="bi bi-cart"></i>
        <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
          2+
          <span class="visually-hidden">unread messages</span>
        </span>
        </button>
      </li>
    </ul>
    <form class="d-flex">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
    </div>
  </div>
  </nav>

  <!--Mini Cart-->
  <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
  <div class="offcanvas-header">
    <h5 id="offcanvasRightLabel">Mini Cart</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <ul class="list-group">
      <li class="list-group-item"><img width="30" class="img-fluid me-1" src="https://therichpost.com/testjsonapi/wp-content/themes/testjsonapi/assets/images/items/8.jpg" >Item 1 <i class="bi bi-x-circle-fill float-end"></i></li>
      <li class="list-group-item"><img width="30" class="img-fluid me-1" src="https://therichpost.com/testjsonapi/wp-content/themes/testjsonapi/assets/images/items/7.jpg" >Item 2 <i class="bi bi-x-circle-fill float-end"></i></li>
      </ul>
      <button type="button" class="btn btn-primary mt-2 float-end">Checkout</button>
  </div>
  </div>
  <!--Mini Cart-->
  <div class="container-fluid" style="background-color: rgb(58, 175, 210);">
  <div class="container d-lg-flex justify-content-between align-items-center ps-lg-4">

    <div class="pb-lg-5 mb-lg-5 text-center text-lg-start text-lg-nowrap fw-bold">
      <h3 class="h2 text-light fw-bold pb-1 from-start">Has just arrived!</h3>
      <h2 class="text-light fw-bold display-5 from-start delay-1">Huge Summer Collection</h2>
      <p class="fs-lg text-light pb-3 from-start delay-2">Swimwear, Tops, Shorts, Sunglasses &amp; much more...</p>
      <div class="d-table scale-up delay-4 mx-auto mx-lg-0"><a class="btn btn-primary" href="shop-grid-ls.html">Shop Now<i class="ci-arrow-right ms-2 me-n1"></i></a></div>
    </div>
    
    <img class="img-fluid" src="fullwidthimage">
  </div>
  </div>

  <div class="container mt-5">
  <h3>Latest Products</h3>
  <div class="card-group row">
    <div class="card col-sm-4">
      <img src="https://therichpost.com/testjsonapi/wp-content/themes/testjsonapi/assets/images/items/8.jpg" class="card-img-top" alt="...">
      <div class="card-body">
      <h5 class="card-title">Item 1</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
      <button class="btn btn-primary" type="button">Add to cart</button>
      </div>
    </div>
    <div class="card col-sm-4">
      <img src="https://therichpost.com/testjsonapi/wp-content/themes/testjsonapi/assets/images/items/7.jpg" class="card-img-top" alt="...">
      <div class="card-body">
      <h5 class="card-title">Item 2</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <button class="btn btn-primary" type="button">Add to cart</button>
      </div>
    </div>
    <div class="card col-sm-4">
      <img src="https://therichpost.com/testjsonapi/wp-content/themes/testjsonapi/assets/images/items/6.jpg" class="card-img-top" alt="...">
      <div class="card-body">
      <h5 class="card-title">Item 3</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
      <button class="btn btn-primary" type="button">Add to cart</button>
      </div>
    </div>
    </div>
  
  </div>

  <div class="container-fluid mt-5" style="background-color: rgb(245, 177, 176);">
  <div class="container d-lg-flex justify-content-between align-items-center ps-lg-4">

    <div class="pb-lg-5 mb-lg-5 text-center text-lg-start text-lg-nowrap fw-bold">
      <h3 class="h2 text-light fw-bold pb-1 from-start">Hurry up! Limited time offer.</h3>
      <h2 class="text-light fw-bold display-5 from-start delay-1">Women Sportswear Sale</h2>
      <div class="d-table scale-up delay-4 mx-auto mx-lg-0"><a class="btn btn-primary" href="shop-grid-ls.html">Shop Now<i class="ci-arrow-right ms-2 me-n1"></i></a></div>
    </div>
    
    <img class="img-fluid" src="fullwidthimage">
  </div>
  </div>
  <div class="container-fluid bg-secondary p-3">
    <div class="container">
      <div class="fs-xs text-light opacity-50 text-center text-md-start">© All rights reserved. Made by <a class="text-light" href="https://therichpost.com/" target="_blank" rel="noopener">therichpost</a></div>
    </div>
  </div>

Now we are done friends and please run ng serve command to check the output in browser(locahost:4200) and if you have any kind of query then please do comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements. For better understanding please watch video above.

Guys I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

Jassa

Thanks