Category: Angular

How to create multiple language website in Angular 16+?
Hello friends, welcome back to my blog and today in this blog post, I am going to tell you, how to create multiple language website in Angular 16+?

Angular Language Translate

Angular 16 came and if you are new then you must check below two links:
1. Angular16 for beginners
ngx-translate working demo

Friends now I proceed onwards and here is the working code snippet for how to create multiple language website in Angular 16+?and please use carefully this to avoid the mistakes:

1. Firstly friends we need fresh angular 16 setup and for this we need to run below commands but if you already have angular 16 setup then you can avoid below commands. Secondly we should also have latest node version installed on our system:
```
npm install -g @angular/cli 

ng new angulartranslate //Create new Angular Project

cd angulartranslate // Go inside the Angular Project Folder

ng serve --open // Run and Open the Angular Project

http://localhost:4200/ // Working Angular Project Url
```
2. Now friends, here we need to run below commands into our project terminal to install bootstrap(for good looks) and ngx-translate modules into our angular application:
```
npm i bootstrap --save 


npm install @ngx-translate/http-loader@6.0.0 


npm install @ngx-translate/core@13.0.0 


ng serve --o
```
3. Now friends, here we need to add below into our angular.json file to get modules styles and scripts:
```
...
"styles": [
              ...
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              
          ]
...
```
4. Now friends we just need to add below code into src/app/app.module.ts file:
```
...
import {HttpClientModule, HttpClient} from '@angular/common/http';
import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
// required for AOT compilation
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

@NgModule({
  ...
  imports: [
     ...
    // ngx-translate and the loader module
    HttpClientModule,
    TranslateModule.forRoot({
        loader: {
            provide: TranslateLoader,
            useFactory: HttpLoaderFactory,
            deps: [HttpClient]
        }
    }),
    
  ],
  ...
})
```
5. Now friends inside src/assets folder create ‘i18n’ folder and now inside ‘i18n’ folder, we need to create two files name ‘en.json’ and ‘fr.json’ and we need to add below code inside these files and for better understanding of files and folder, please check below image:
```
/**  en.json file code **/

{
    "HELLO": "Hello World"
}

/**  fr.json file code **/

{
    "HELLO": "Bonjour le monde"
}
```
6. Now friends we just need to add below code into src/app/app.component.ts file:
```
import {TranslateService} from '@ngx-translate/core';

export class AppComponent {
...
constructor(private translate: TranslateService) {
    
 
    // the lang to use, if the lang isn't available, it will use the current loader to get them
    translate.use('en');

    // for default language to be french, you need to use below code
    //translate.use('fr');
  }
}
```
7. Now friends we just need to add below code into src/app/app.component.html file to see the output on browser:
```
<div class="jumbotron text-center">
  <h1>tehrichpost.com</h1>
  
</div>

<div class="container">
  <div class="row">
    <div class="col-sm-12 text-center">
      <h1>{{ 'HELLO' | translate }}</h1>
    </div>
    
</div>
```
Now we are done friends. If you have any kind of query or suggestion or any requirement then feel free to comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements. For better understanding must watch video above.
1. NGX-Translate
2. ngx-translate
3. Angular i18n change language dynamically
4. Angular multi language
5. best practice Language translation in angular
6. Multi language support in angular ngx-translate
7. pipe no pipe found with name ‘translate’
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
October 4, 2023

Angular 16+ Crud using Json Server working Example

Hello friends, welcome back to my blog. Today this blog post I will tell you, Angular 16+ Crud using Json Server working Example.

Live Demo

Angular 16 came and if you are new then you must check below two links:

Friends now I proceed onwards and here is the working code snippet and please use carefully this to avoid the mistakes:

1. Firstly friends we need fresh angular 16 setup and for this we need to run below commands but if you already have angular 16 setup then you can avoid below commands. Secondly we should also have latest node version installed on our system:

npm install -g @angular/cli 

ng new angulardemo //Create new Angular Project 

cd angulardemo // Go inside the Angular Project Folder 

ng g c api //will create api crud component

ng g s services/recipe //will create services files

ng g i models/recipe //will create interface file

npm i bootstrap

npm i @popperjs/core

2. Now guys we need to add below code inside angulardemo/angular.json files to call bootstrap 5 script and styles:

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

3. Now guys we need to add below code inside src/app/api/api.component.html file:

<div class="container w-50 p-5">
    <h1 class="text-center pb-4 ">Add, Update and Delete a Recipe </h1>
    <form  #isFormValid="ngForm" [formGroup]="recipeFormGroup" class="form-group">

          <div class="mb-3">
            <!-- name -->
            <label for="name" class="form-label">Name</label>
            <input type="text" class="form-control" name="name" formControlName="name" id="name" placeholder="Enter Recipe Name">

            <!-- name errors -->
            <div *ngIf="name?.touched && name?.invalid">
              <small class="text-danger" *ngIf="name?.errors?.['required']">Name is required</small>
              <small class="text-danger" *ngIf="name?.errors?.['minlength']">Name is too short</small>
            </div>
          </div>

          <!-- price -->
          <div class="mb-3">
            <label for="price" class="form-label">Price</label>
            <input type="price" class="form-control" name="price" formControlName="price" id="price" placeholder="price">

            <!-- price errors -->
            <div *ngIf="price?.touched && price?.invalid">
              <small class="text-danger" *ngIf="price?.errors?.['required']">Price is required</small>
              <small class="text-danger" *ngIf="price?.errors?.['pattern']">Price is invalid</small>
            </div>
          </div>

          <!-- create(Add) or Update(put) -->
          <div class="mb-3">
            <!-- create -->
            <button *ngIf="!addOrPut" (click)="postRecipe()" class="form-control btn btn-dark hvr" [disabled]="!isFormValid.valid">Add</button>
            <!-- Update -->
            <button *ngIf="addOrPut" (click)="putRecipe()" class="form-control btn btn-warning hvr" [disabled]="!isFormValid.valid">Update</button>
          </div>
    </form>

<div *ngIf="array.length == 0" class="alert alert-warning text-center">Empty array</div>
</div>

<div *ngIf="array.length != 0" class="container w-50">
  <table class="table table-striped table-bordered">
      <thead>
          <tr>
              <th>#Id</th>
              <th>Name</th>
              <th>Price (MAD)</th>
              <th>Edit</th>
              <th>Delete</th>
          </tr>
      </thead>
      <tbody>
          <tr *ngFor="let eachCmd of array">
              <td scope="row">{{eachCmd.id}}</td>
              <td>{{eachCmd.name}}</td>
              <td>{{eachCmd.price}}</td>
              <td><button (click)="editRecipe(eachCmd)" class="btn btn-warning">Update</button></td>
              <td><button (click)="deleteRecipe(eachCmd.id)" class="btn btn-danger">Delete</button></td>
          </tr>

      </tbody>
  </table>
</div>

4. Now guys we need to add below code inside src/app/api/api.component.ts file:

import { Component, OnInit } from '@angular/core';
import { RecipeDto } from '../models/recipe.interface';
import { RecipeService } from '../services/recipe.service';
import { FormGroup, FormControl, Validators } from '@angular/forms';


@Component({
  selector: 'app-api',
  templateUrl: './api.component.html',
  styleUrls: ['./api.component.css']
})

export class ApiComponent implements OnInit {
  array: RecipeDto[] = new Array<RecipeDto>();

  recipeFormGroup: FormGroup = new FormGroup({
    id: new FormControl<number>(+''),

    name: new FormControl<string>('', [
      Validators.required,
      Validators.minLength(3)
    ]),

    price: new FormControl<number>(+'', [
      Validators.required,
      Validators.pattern('[0-9]*'),
    ])
  });

  get name() {
    return this.recipeFormGroup.get('name');
  }

  get price() {
    return this.recipeFormGroup.get('price');
  }

  addOrPut = false;

  constructor(private recipeService:RecipeService) { }

  ngOnInit(): void {
    this.getRecipe();
  }

  getRecipe() {
    this.recipeService.getAll()
    .subscribe((data: RecipeDto[]) =>{
      this.array = data;
    })
  }

  deleteRecipe(id: number){
    this.recipeService.delete(id).subscribe(
      () => {this.array = this.array.filter( (aRecipe) => aRecipe.id != id)
      })
  }

  postRecipe(){
    if(!confirm(`api.component.ts:58 -> Did you run the JSON-SERVER ? if yes please comment this line`)) alert(`You should run the json-server  (read README file) ^^`);
    this.recipeService.post(this.recipeFormGroup.value)
    /*
      this.recipeFormGroup.value is equivalent to:
      {
        name,
        price
      }
    */
    .subscribe(
      (eachRecipe: any)=>{
          this.array = [eachRecipe, ...this.array];
          this.clearInputs();
    })

  }

  // make inputs empty
  clearInputs(){
    this.recipeFormGroup.reset({
      name: '',
      price: +''
    });
  }

  // edit recipeService
  editRecipe(eachRecipe: RecipeDto){
    this.recipeFormGroup.get('id')?.setValue(eachRecipe.id);
    this.recipeFormGroup.get('name')?.setValue(eachRecipe.name);
    this.recipeFormGroup.get('price')?.setValue(eachRecipe.price);
    this.addOrPut=true;
  }

  // update recipeService
  putRecipe(){
    this.recipeService.updateRecipe(this.recipeFormGroup.value)
   
    .subscribe( () => {
      this.clearInputs();
      this.getRecipe();
      this.addOrPut = false;
    })
  }
}

5. Now guys we need to add below code inside src/app/api/api.component.css file:

.hvr:hover{
    background-color: rgb(173, 201, 192);
    color:black;
}

6. Now guys we need to add below code inside src/app/models/recipe.interface.ts file:

export class RecipeDto {
    id!: number;
    name!: string;
    price!: number;
}

7. Now guys we need to add below code inside src/app/services/recipe.service.ts file:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { environment } from 'src/environments/environment.prod';
import { RecipeDto } from '../models/recipe.interface';

@Injectable({
  providedIn: 'root'
})
export class RecipeService {
  urlApi= environment.api;

  constructor(private http:HttpClient) {   }

  // GET all
  getAll(){
    return this.http.get<RecipeDto[]>(this.urlApi);
  }

  // DELETE one
  delete(id: number){
    return this.http.delete(`${this.urlApi}/${id}`);
  }

  // CREATE one
  post(recipe: RecipeDto){
      return this.http.post<RecipeDto>(this.urlApi, recipe);
  }

  // UPDATE one
  updateRecipe(recipe: RecipeDto){
    return this.http.put(`${this.urlApi}/${recipe.id}`, recipe);
  }

  // search by id
  search(id: number){
      return this.http.get<RecipeDto>(`${this.urlApi}/${id}`); //${id}
  }

}

8. Now guys we need to add below code inside src/environments/environment.prod.ts file:

export const environment = {
  production: true,
  api: `http://localhost:42400/recipes`
};

9. Now guys please create `fakeDatabase.json` file on the project root and add below demo data inside it:

{
  "recipes": [
    {
      "id": 1,
      "name": "Butter Chicken",
      "price": "800"
    },
    {
      "id": 2,
      "name": "Mutton",
      "price": "980"
    }
  ]
}

10. Now guys inside package.json file add below line of code under scripts tag to run json server:

also run command npm json-server inside your terminal

"scripts": {
   ...
    "json-server": "json-server --watch fakeDatabase.json --port 42400"
  },

11. Guys in the end we need to add below code inside src/app/app.component.html file

<app-api></app-api>

Friends in the end must run ng serve command into your terminal to run the angular 17 project(localhost:4200).

Now we are done friends. If you have any kind of query, suggestion and new requirement then feel free to comment below.

Note: Friends, In this post, I just tell the basic setup and things, you can change the code according to your requirements.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad because with your views, I will make my next posts more good and helpful.

Jassa

Thanks 🙂

October 3, 2023

How to Build Responsive Admin Dashboard with Angular 16+?

Hello friends, welcome back to my blog. Today this blog post I will tell you, How to Build Responsive Admin Dashboard with Angular 16+?

Key Features:

Angular Latest Version
Angular routing
Angular active routes functionality
Full responsive
All angular admin dashboard website pages
Toggle sidebar

Live Demo

**Angular admin dashboard register page**

Angular 16 came and if you are new then you must check below two links:

Friends now I proceed onwards and here is the working code snippet and please use carefully this to avoid the mistakes:

1. Firstly friends we need fresh angular 16 setup and for this we need to run below commands but if you already have angular 16 setup then you can avoid below commands. Secondly we should also have latest node version installed on our system:

guys with these commands we will get components as well

npm install -g @angular/cli 

ng new angulardemo //Create new Angular Project 

cd angulardemo // Go inside the Angular Project Folder 

ng g c home //will create home component

ng g c login //will create login component

ng g c register //will create register component

2. Now friends, please download js and styles from this git repo link and please put all the js, css files folders in “src/assets/” folder:

Angular Admin project git repo

3. Now friends we just need to add below code into angulardemo/src/app/app.component.html file to get final out on the web browser:

<app-header></app-header>
<div id="layoutSidenav">
    <router-outlet></router-outlet>
</div>

4. Now guys please add the below code inside angulardemo/angular.json file to styles and scripts:

...
 "styles": [
              "src/styles.css",
              "src/assets/css/styles.css"
            ],
            "scripts": [
              "src/assets/js/scripts.js",
              "src/assets/assets/demo/chart-area-demo.js",
              "src/assets/assets/demo/chart-bar-demo.js",
              "src/assets/js/datatables-simple-demo.js"
            ]
...

5. Now friends we just need to add below code into angulardemo/src/app/header/header.component.html file:

<nav class="sb-topnav navbar navbar-expand navbar-dark bg-dark">
  <!-- Navbar Brand-->
  <a class="navbar-brand ps-3" routerLink="">Admin</a>
  <!-- Sidebar Toggle-->
  <button class="btn btn-link btn-sm order-1 order-lg-0 me-4 me-lg-0" id="sidebarToggle" href="#!"><i class="fas fa-bars"></i></button>
  <!-- Navbar Search-->
  <form class="d-none d-md-inline-block form-inline ms-auto me-0 me-md-3 my-2 my-md-0">
      <div class="input-group">
          <input class="form-control" type="text" placeholder="Search for..." aria-label="Search for..." aria-describedby="btnNavbarSearch" />
          <button class="btn btn-primary" id="btnNavbarSearch" type="button"><i class="fas fa-search"></i></button>
      </div>
  </form>
  <!-- Navbar-->
  <ul class="navbar-nav ms-auto ms-md-0 me-3 me-lg-4">
      <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" id="navbarDropdown" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"><i class="fas fa-user fa-fw"></i></a>
          <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
              <li><a class="dropdown-item" href="#!">Settings</a></li>
              <li><a class="dropdown-item" href="#!">Activity Log</a></li>
              <li><hr class="dropdown-divider" /></li>
              <li><a class="dropdown-item" href="#!">Logout</a></li>
          </ul>
      </li>
  </ul>
</nav>

6. Now friends we just need to add below code into angulardemo/src/app/footer/footer.component.html file:

<footer class="py-4 bg-light mt-auto">
  <div class="container-fluid px-4">
      <div class="d-flex align-items-center justify-content-between small">
          <div class="text-muted">Copyright &copy; Your Website 2023</div>
          <div>
              <a href="#">Privacy Policy</a>
              &middot;
              <a href="#">Terms &amp; Conditions</a>
          </div>
      </div>
  </div>
</footer>

7. Now friends we just need to add below code into angulardemo/src/app/home/home.component.html file:

<div id="layoutSidenav_nav">
      <nav class="sb-sidenav accordion sb-sidenav-dark" id="sidenavAccordion">
          <div class="sb-sidenav-menu">
              <div class="nav">
                  <div class="sb-sidenav-menu-heading">Core</div>
                  <a class="nav-link" href="#">
                      <div class="sb-nav-link-icon"><i class="fas fa-tachometer-alt"></i></div>
                      Dashboard
                  </a>
                  <div class="sb-sidenav-menu-heading">Interface</div>
                  <a class="nav-link collapsed" href="#" data-bs-toggle="collapse" data-bs-target="#collapsePages" aria-expanded="false" aria-controls="collapsePages">
                      <div class="sb-nav-link-icon"><i class="fas fa-book-open"></i></div>
                      Pages
                      <div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
                  </a>
                  <div class="collapse" id="collapsePages" aria-labelledby="headingTwo" data-bs-parent="#sidenavAccordion">
                      <nav class="sb-sidenav-menu-nested nav accordion" id="sidenavAccordionPages">
                          <a class="nav-link collapsed" href="#" data-bs-toggle="collapse" data-bs-target="#pagesCollapseAuth" aria-expanded="false" aria-controls="pagesCollapseAuth">
                              Authentication
                              <div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
                          </a>
                          <div class="collapse" id="pagesCollapseAuth" aria-labelledby="headingOne" data-bs-parent="#sidenavAccordionPages">
                              <nav class="sb-sidenav-menu-nested nav">
                                  <a class="nav-link" routerLink="/login">Login</a>
                                  <a class="nav-link" routerLink="/register">Register</a>
                              </nav>
                          </div>
                      </nav>
                  </div>
                  <div class="sb-sidenav-menu-heading">Addons</div>
                  <a class="nav-link" href="#">
                      <div class="sb-nav-link-icon"><i class="fas fa-chart-area"></i></div>
                      Charts
                  </a>
                  <a class="nav-link" href="#">
                      <div class="sb-nav-link-icon"><i class="fas fa-table"></i></div>
                      Tables
                  </a>
              </div>
          </div>
          <div class="sb-sidenav-footer">
              <div class="small">Logged in as:</div>
              Admin
          </div>
      </nav>
  </div>
  <div id="layoutSidenav_content">
      <main>
          <div class="container-fluid px-4">
              <h1 class="mt-4">Dashboard</h1>
              <ol class="breadcrumb mb-4">
                  <li class="breadcrumb-item active">Dashboard</li>
              </ol>
              <div class="row">
                  <div class="col-xl-3 col-md-6">
                      <div class="card bg-primary text-white mb-4">
                          <div class="card-body">Primary Card</div>
                          <div class="card-footer d-flex align-items-center justify-content-between">
                              <a class="small text-white stretched-link" href="#">View Details</a>
                              <div class="small text-white"><i class="fas fa-angle-right"></i></div>
                          </div>
                      </div>
                  </div>
                  <div class="col-xl-3 col-md-6">
                      <div class="card bg-warning text-white mb-4">
                          <div class="card-body">Warning Card</div>
                          <div class="card-footer d-flex align-items-center justify-content-between">
                              <a class="small text-white stretched-link" href="#">View Details</a>
                              <div class="small text-white"><i class="fas fa-angle-right"></i></div>
                          </div>
                      </div>
                  </div>
                  <div class="col-xl-3 col-md-6">
                      <div class="card bg-success text-white mb-4">
                          <div class="card-body">Success Card</div>
                          <div class="card-footer d-flex align-items-center justify-content-between">
                              <a class="small text-white stretched-link" href="#">View Details</a>
                              <div class="small text-white"><i class="fas fa-angle-right"></i></div>
                          </div>
                      </div>
                  </div>
                  <div class="col-xl-3 col-md-6">
                      <div class="card bg-danger text-white mb-4">
                          <div class="card-body">Danger Card</div>
                          <div class="card-footer d-flex align-items-center justify-content-between">
                              <a class="small text-white stretched-link" href="#">View Details</a>
                              <div class="small text-white"><i class="fas fa-angle-right"></i></div>
                          </div>
                      </div>
                  </div>
              </div>
              <div class="row">
                  <div class="col-xl-6">
                      <div class="card mb-4">
                          <div class="card-header">
                              <i class="fas fa-chart-area me-1"></i>
                              Area Chart Example
                          </div>
                          <div class="card-body"><canvas id="myAreaChart" width="100%" height="40"></canvas></div>
                      </div>
                  </div>
                  <div class="col-xl-6">
                      <div class="card mb-4">
                          <div class="card-header">
                              <i class="fas fa-chart-bar me-1"></i>
                              Bar Chart Example
                          </div>
                          <div class="card-body"><canvas id="myBarChart" width="100%" height="40"></canvas></div>
                      </div>
                  </div>
              </div>
              <div class="card mb-4">
                  <div class="card-header">
                      <i class="fas fa-table me-1"></i>
                      DataTable Example
                  </div>
                  <div class="card-body">
                      <table id="datatablesSimple">
                          <thead>
                              <tr>
                                  <th>Name</th>
                                  <th>Position</th>
                                  <th>Office</th>
                                  <th>Age</th>
                                  <th>Start date</th>
                                  <th>Salary</th>
                              </tr>
                          </thead>
                          <tfoot>
                              <tr>
                                  <th>Name</th>
                                  <th>Position</th>
                                  <th>Office</th>
                                  <th>Age</th>
                                  <th>Start date</th>
                                  <th>Salary</th>
                              </tr>
                          </tfoot>
                          <tbody>
                              <tr>
                                  <td>Tiger Nixon</td>
                                  <td>System Architect</td>
                                  <td>Edinburgh</td>
                                  <td>61</td>
                                  <td>2011/04/25</td>
                                  <td>$320,800</td>
                              </tr>
                              <tr>
                                  <td>Garrett Winters</td>
                                  <td>Accountant</td>
                                  <td>Tokyo</td>
                                  <td>63</td>
                                  <td>2011/07/25</td>
                                  <td>$170,750</td>
                              </tr>
                              <tr>
                                  <td>Ashton Cox</td>
                                  <td>Junior Technical Author</td>
                                  <td>San Francisco</td>
                                  <td>66</td>
                                  <td>2009/01/12</td>
                                  <td>$86,000</td>
                              </tr>
                              <tr>
                                  <td>Cedric Kelly</td>
                                  <td>Senior Javascript Developer</td>
                                  <td>Edinburgh</td>
                                  <td>22</td>
                                  <td>2012/03/29</td>
                                  <td>$433,060</td>
                              </tr>
                              <tr>
                                  <td>Airi Satou</td>
                                  <td>Accountant</td>
                                  <td>Tokyo</td>
                                  <td>33</td>
                                  <td>2008/11/28</td>
                                  <td>$162,700</td>
                              </tr>
                              <tr>
                                  <td>Brielle Williamson</td>
                                  <td>Integration Specialist</td>
                                  <td>New York</td>
                                  <td>61</td>
                                  <td>2012/12/02</td>
                                  <td>$372,000</td>
                              </tr>
                              <tr>
                                  <td>Herrod Chandler</td>
                                  <td>Sales Assistant</td>
                                  <td>San Francisco</td>
                                  <td>59</td>
                                  <td>2012/08/06</td>
                                  <td>$137,500</td>
                              </tr>
                              <tr>
                                  <td>Rhona Davidson</td>
                                  <td>Integration Specialist</td>
                                  <td>Tokyo</td>
                                  <td>55</td>
                                  <td>2010/10/14</td>
                                  <td>$327,900</td>
                              </tr>
                              <tr>
                                  <td>Colleen Hurst</td>
                                  <td>Javascript Developer</td>
                                  <td>San Francisco</td>
                                  <td>39</td>
                                  <td>2009/09/15</td>
                                  <td>$205,500</td>
                              </tr>
                              <tr>
                                  <td>Sonya Frost</td>
                                  <td>Software Engineer</td>
                                  <td>Edinburgh</td>
                                  <td>23</td>
                                  <td>2008/12/13</td>
                                  <td>$103,600</td>
                              </tr>
                              <tr>
                                  <td>Jena Gaines</td>
                                  <td>Office Manager</td>
                                  <td>London</td>
                                  <td>30</td>
                                  <td>2008/12/19</td>
                                  <td>$90,560</td>
                              </tr>
                              <tr>
                                  <td>Quinn Flynn</td>
                                  <td>Support Lead</td>
                                  <td>Edinburgh</td>
                                  <td>22</td>
                                  <td>2013/03/03</td>
                                  <td>$342,000</td>
                              </tr>
                              <tr>
                                  <td>Charde Marshall</td>
                                  <td>Regional Director</td>
                                  <td>San Francisco</td>
                                  <td>36</td>
                                  <td>2008/10/16</td>
                                  <td>$470,600</td>
                              </tr>
                              <tr>
                                  <td>Haley Kennedy</td>
                                  <td>Senior Marketing Designer</td>
                                  <td>London</td>
                                  <td>43</td>
                                  <td>2012/12/18</td>
                                  <td>$313,500</td>
                              </tr>
                              <tr>
                                  <td>Tatyana Fitzpatrick</td>
                                  <td>Regional Director</td>
                                  <td>London</td>
                                  <td>19</td>
                                  <td>2010/03/17</td>
                                  <td>$385,750</td>
                              </tr>
                              <tr>
                                  <td>Michael Silva</td>
                                  <td>Marketing Designer</td>
                                  <td>London</td>
                                  <td>66</td>
                                  <td>2012/11/27</td>
                                  <td>$198,500</td>
                              </tr>
                              <tr>
                                  <td>Paul Byrd</td>
                                  <td>Chief Financial Officer (CFO)</td>
                                  <td>New York</td>
                                  <td>64</td>
                                  <td>2010/06/09</td>
                                  <td>$725,000</td>
                              </tr>
                              <tr>
                                  <td>Gloria Little</td>
                                  <td>Systems Administrator</td>
                                  <td>New York</td>
                                  <td>59</td>
                                  <td>2009/04/10</td>
                                  <td>$237,500</td>
                              </tr>
                              <tr>
                                  <td>Bradley Greer</td>
                                  <td>Software Engineer</td>
                                  <td>London</td>
                                  <td>41</td>
                                  <td>2012/10/13</td>
                                  <td>$132,000</td>
                              </tr>
                              <tr>
                                  <td>Dai Rios</td>
                                  <td>Personnel Lead</td>
                                  <td>Edinburgh</td>
                                  <td>35</td>
                                  <td>2012/09/26</td>
                                  <td>$217,500</td>
                              </tr>
                              <tr>
                                  <td>Jenette Caldwell</td>
                                  <td>Development Lead</td>
                                  <td>New York</td>
                                  <td>30</td>
                                  <td>2011/09/03</td>
                                  <td>$345,000</td>
                              </tr>
                              <tr>
                                  <td>Yuri Berry</td>
                                  <td>Chief Marketing Officer (CMO)</td>
                                  <td>New York</td>
                                  <td>40</td>
                                  <td>2009/06/25</td>
                                  <td>$675,000</td>
                              </tr>
                              <tr>
                                  <td>Caesar Vance</td>
                                  <td>Pre-Sales Support</td>
                                  <td>New York</td>
                                  <td>21</td>
                                  <td>2011/12/12</td>
                                  <td>$106,450</td>
                              </tr>
                              <tr>
                                  <td>Doris Wilder</td>
                                  <td>Sales Assistant</td>
                                  <td>Sidney</td>
                                  <td>23</td>
                                  <td>2010/09/20</td>
                                  <td>$85,600</td>
                              </tr>
                              <tr>
                                  <td>Angelica Ramos</td>
                                  <td>Chief Executive Officer (CEO)</td>
                                  <td>London</td>
                                  <td>47</td>
                                  <td>2009/10/09</td>
                                  <td>$1,200,000</td>
                              </tr>
                              <tr>
                                  <td>Gavin Joyce</td>
                                  <td>Developer</td>
                                  <td>Edinburgh</td>
                                  <td>42</td>
                                  <td>2010/12/22</td>
                                  <td>$92,575</td>
                              </tr>
                              <tr>
                                  <td>Jennifer Chang</td>
                                  <td>Regional Director</td>
                                  <td>Singapore</td>
                                  <td>28</td>
                                  <td>2010/11/14</td>
                                  <td>$357,650</td>
                              </tr>
                              <tr>
                                  <td>Brenden Wagner</td>
                                  <td>Software Engineer</td>
                                  <td>San Francisco</td>
                                  <td>28</td>
                                  <td>2011/06/07</td>
                                  <td>$206,850</td>
                              </tr>
                              <tr>
                                  <td>Fiona Green</td>
                                  <td>Chief Operating Officer (COO)</td>
                                  <td>San Francisco</td>
                                  <td>48</td>
                                  <td>2010/03/11</td>
                                  <td>$850,000</td>
                              </tr>
                              <tr>
                                  <td>Shou Itou</td>
                                  <td>Regional Marketing</td>
                                  <td>Tokyo</td>
                                  <td>20</td>
                                  <td>2011/08/14</td>
                                  <td>$163,000</td>
                              </tr>
                              <tr>
                                  <td>Michelle House</td>
                                  <td>Integration Specialist</td>
                                  <td>Sidney</td>
                                  <td>37</td>
                                  <td>2011/06/02</td>
                                  <td>$95,400</td>
                              </tr>
                              <tr>
                                  <td>Suki Burks</td>
                                  <td>Developer</td>
                                  <td>London</td>
                                  <td>53</td>
                                  <td>2009/10/22</td>
                                  <td>$114,500</td>
                              </tr>
                              <tr>
                                  <td>Prescott Bartlett</td>
                                  <td>Technical Author</td>
                                  <td>London</td>
                                  <td>27</td>
                                  <td>2011/05/07</td>
                                  <td>$145,000</td>
                              </tr>
                              <tr>
                                  <td>Gavin Cortez</td>
                                  <td>Team Leader</td>
                                  <td>San Francisco</td>
                                  <td>22</td>
                                  <td>2008/10/26</td>
                                  <td>$235,500</td>
                              </tr>
                              <tr>
                                  <td>Martena Mccray</td>
                                  <td>Post-Sales support</td>
                                  <td>Edinburgh</td>
                                  <td>46</td>
                                  <td>2011/03/09</td>
                                  <td>$324,050</td>
                              </tr>
                              <tr>
                                  <td>Unity Butler</td>
                                  <td>Marketing Designer</td>
                                  <td>San Francisco</td>
                                  <td>47</td>
                                  <td>2009/12/09</td>
                                  <td>$85,675</td>
                              </tr>
                              <tr>
                                  <td>Howard Hatfield</td>
                                  <td>Office Manager</td>
                                  <td>San Francisco</td>
                                  <td>51</td>
                                  <td>2008/12/16</td>
                                  <td>$164,500</td>
                              </tr>
                              <tr>
                                  <td>Hope Fuentes</td>
                                  <td>Secretary</td>
                                  <td>San Francisco</td>
                                  <td>41</td>
                                  <td>2010/02/12</td>
                                  <td>$109,850</td>
                              </tr>
                              <tr>
                                  <td>Vivian Harrell</td>
                                  <td>Financial Controller</td>
                                  <td>San Francisco</td>
                                  <td>62</td>
                                  <td>2009/02/14</td>
                                  <td>$452,500</td>
                              </tr>
                              <tr>
                                  <td>Timothy Mooney</td>
                                  <td>Office Manager</td>
                                  <td>London</td>
                                  <td>37</td>
                                  <td>2008/12/11</td>
                                  <td>$136,200</td>
                              </tr>
                              <tr>
                                  <td>Jackson Bradshaw</td>
                                  <td>Director</td>
                                  <td>New York</td>
                                  <td>65</td>
                                  <td>2008/09/26</td>
                                  <td>$645,750</td>
                              </tr>
                              <tr>
                                  <td>Olivia Liang</td>
                                  <td>Support Engineer</td>
                                  <td>Singapore</td>
                                  <td>64</td>
                                  <td>2011/02/03</td>
                                  <td>$234,500</td>
                              </tr>
                              <tr>
                                  <td>Bruno Nash</td>
                                  <td>Software Engineer</td>
                                  <td>London</td>
                                  <td>38</td>
                                  <td>2011/05/03</td>
                                  <td>$163,500</td>
                              </tr>
                              <tr>
                                  <td>Sakura Yamamoto</td>
                                  <td>Support Engineer</td>
                                  <td>Tokyo</td>
                                  <td>37</td>
                                  <td>2009/08/19</td>
                                  <td>$139,575</td>
                              </tr>
                              <tr>
                                  <td>Thor Walton</td>
                                  <td>Developer</td>
                                  <td>New York</td>
                                  <td>61</td>
                                  <td>2013/08/11</td>
                                  <td>$98,540</td>
                              </tr>
                              <tr>
                                  <td>Finn Camacho</td>
                                  <td>Support Engineer</td>
                                  <td>San Francisco</td>
                                  <td>47</td>
                                  <td>2009/07/07</td>
                                  <td>$87,500</td>
                              </tr>
                              <tr>
                                  <td>Serge Baldwin</td>
                                  <td>Data Coordinator</td>
                                  <td>Singapore</td>
                                  <td>64</td>
                                  <td>2012/04/09</td>
                                  <td>$138,575</td>
                              </tr>
                              <tr>
                                  <td>Zenaida Frank</td>
                                  <td>Software Engineer</td>
                                  <td>New York</td>
                                  <td>63</td>
                                  <td>2010/01/04</td>
                                  <td>$125,250</td>
                              </tr>
                              <tr>
                                  <td>Zorita Serrano</td>
                                  <td>Software Engineer</td>
                                  <td>San Francisco</td>
                                  <td>56</td>
                                  <td>2012/06/01</td>
                                  <td>$115,000</td>
                              </tr>
                              <tr>
                                  <td>Jennifer Acosta</td>
                                  <td>Junior Javascript Developer</td>
                                  <td>Edinburgh</td>
                                  <td>43</td>
                                  <td>2013/02/01</td>
                                  <td>$75,650</td>
                              </tr>
                              <tr>
                                  <td>Cara Stevens</td>
                                  <td>Sales Assistant</td>
                                  <td>New York</td>
                                  <td>46</td>
                                  <td>2011/12/06</td>
                                  <td>$145,600</td>
                              </tr>
                              <tr>
                                  <td>Hermione Butler</td>
                                  <td>Regional Director</td>
                                  <td>London</td>
                                  <td>47</td>
                                  <td>2011/03/21</td>
                                  <td>$356,250</td>
                              </tr>
                              <tr>
                                  <td>Lael Greer</td>
                                  <td>Systems Administrator</td>
                                  <td>London</td>
                                  <td>21</td>
                                  <td>2009/02/27</td>
                                  <td>$103,500</td>
                              </tr>
                              <tr>
                                  <td>Jonas Alexander</td>
                                  <td>Developer</td>
                                  <td>San Francisco</td>
                                  <td>30</td>
                                  <td>2010/07/14</td>
                                  <td>$86,500</td>
                              </tr>
                              <tr>
                                  <td>Shad Decker</td>
                                  <td>Regional Director</td>
                                  <td>Edinburgh</td>
                                  <td>51</td>
                                  <td>2008/11/13</td>
                                  <td>$183,000</td>
                              </tr>
                              <tr>
                                  <td>Michael Bruce</td>
                                  <td>Javascript Developer</td>
                                  <td>Singapore</td>
                                  <td>29</td>
                                  <td>2011/06/27</td>
                                  <td>$183,000</td>
                              </tr>
                              <tr>
                                  <td>Donna Snider</td>
                                  <td>Customer Support</td>
                                  <td>New York</td>
                                  <td>27</td>
                                  <td>2011/01/25</td>
                                  <td>$112,000</td>
                              </tr>
                          </tbody>
                      </table>
                  </div>
              </div>
          </div>
      </main>
      <app-footer></app-footer>
  </div>

8. Now friends we just need to add below code into angulardemo/src/app/login/login.component.html file:

<div id="layoutAuthentication">
    <div id="layoutAuthentication_content">
        <main>
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-5">
                        <div class="card shadow-lg border-0 rounded-lg mt-5">
                            <div class="card-header"><h3 class="text-center font-weight-light my-4">Login</h3></div>
                            <div class="card-body">
                                <form>
                                    <div class="form-floating mb-3">
                                        <input class="form-control" id="inputEmail" type="email" placeholder="name@example.com" />
                                        <label for="inputEmail">Email address</label>
                                    </div>
                                    <div class="form-floating mb-3">
                                        <input class="form-control" id="inputPassword" type="password" placeholder="Password" />
                                        <label for="inputPassword">Password</label>
                                    </div>
                                    <div class="form-check mb-3">
                                        <input class="form-check-input" id="inputRememberPassword" type="checkbox" value="" />
                                        <label class="form-check-label" for="inputRememberPassword">Remember Password</label>
                                    </div>
                                    <div class="d-flex align-items-center justify-content-between mt-4 mb-0">
                                        <a class="btn btn-primary" href="#">Login</a>
                                    </div>
                                </form>
                            </div>
                            <div class="card-footer text-center py-3">
                                <div class="small"><a routerLink="/register">Need an account? Sign up!</a></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
    <div id="layoutAuthentication_footer">
        <app-footer></app-footer>
    </div>
</div>

9. Now friends we just need to add below code into angulardemo/src/app/register/register.component.html file:

<div id="layoutAuthentication">
    <div id="layoutAuthentication_content">
        <main>
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-7">
                        <div class="card shadow-lg border-0 rounded-lg mt-5">
                            <div class="card-header"><h3 class="text-center font-weight-light my-4">Create Account</h3></div>
                            <div class="card-body">
                                <form>
                                    <div class="row mb-3">
                                        <div class="col-md-6">
                                            <div class="form-floating mb-3 mb-md-0">
                                                <input class="form-control" id="inputFirstName" type="text" placeholder="Enter your first name" />
                                                <label for="inputFirstName">First name</label>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-floating">
                                                <input class="form-control" id="inputLastName" type="text" placeholder="Enter your last name" />
                                                <label for="inputLastName">Last name</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-floating mb-3">
                                        <input class="form-control" id="inputEmail" type="email" placeholder="name@example.com" />
                                        <label for="inputEmail">Email address</label>
                                    </div>
                                    <div class="row mb-3">
                                        <div class="col-md-6">
                                            <div class="form-floating mb-3 mb-md-0">
                                                <input class="form-control" id="inputPassword" type="password" placeholder="Create a password" />
                                                <label for="inputPassword">Password</label>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-floating mb-3 mb-md-0">
                                                <input class="form-control" id="inputPasswordConfirm" type="password" placeholder="Confirm password" />
                                                <label for="inputPasswordConfirm">Confirm Password</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="mt-4 mb-0">
                                        <div class="d-grid"><a class="btn btn-primary btn-block" href="#">Create Account</a></div>
                                    </div>
                                </form>
                            </div>
                            <div class="card-footer text-center py-3">
                                <div class="small"><a routerLink="/login">Have an account? Go to login</a></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
    <div id="layoutAuthentication_footer">
        <app-footer></app-footer>
    </div>
</div>

10. Now friends we just need to add below code into angulardemo/src/app/app-routing.module.ts file:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './register/register.component';
const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'login', component: LoginComponent },
  { path: 'register', component: RegisterComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

11. Now friends we just need to add below code into angulardemo/src/index.html file:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angular | Admin Template</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://cdn.jsdelivr.net/npm/simple-datatables@7.1.2/dist/style.min.css" rel="stylesheet" />
  <!-- custom css -->
 
  <script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script>
</head>
<body class="sb-nav-fixed">
  <app-root></app-root>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" crossorigin="anonymous"></script>
  
  <script src="https://cdn.jsdelivr.net/npm/simple-datatables@7.1.2/dist/umd/simple-datatables.min.js" crossorigin="anonymous"></script>
  
</body>
</html>

Friends in the end must run ng serve command into your terminal to run the angular 17 adminproject (localhost:4200).

Guys click here to check the Angular 17 Bootstrap 5 Free Templates.

Now we are done friends. If you have any kind of query, suggestion and new requirement then feel free to comment below.

Note: Friends, In this post, I just tell the basic setup and things, you can change the code according to your requirements.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad because with your views, I will make my next posts more good and helpful.

Jassa

Thanks

October 2, 2023

How To Build An E-Commerce Site With Angular 16+?

Hello friends, welcome back to my blog. Today this blog post I will tell you, How To Build An E-Commerce Site With Angular 16+?

Key Features:

Angular Latest Version
Angular routing
Angular active routes functionality
Full responsive
All Ecommerce website pages
Product quick view functionality

Live Demo

**Angular ecommerce site product quick view**

Angular 16 came and if you are new then you must check below two links:

Friends now I proceed onwards and here is the working code snippet and please use carefully this to avoid the mistakes:

1. Firstly friends we need fresh angular 16 setup and for this we need to run below commands but if you already have angular 16 setup then you can avoid below commands. Secondly we should also have latest node version installed on our system:

npm install -g @angular/cli 

ng new angulardemo //Create new Angular Project 

cd angulardemo // Go inside the Angular Project Folder

ng g c home

ng g c product  

ng g c singleproduct

ng g c store

ng g c header

ng g c footer

ng serve

2. Now friends, please download images and styles from this git repo link and please put all the images css files folders in “src/assets/” folder after creating css an images folders inside it:

Angular Ecommerce project git repo

3. Now friends we just need to add below code into angulardemo/src/app/app.component.html file to get final out on the web browser:

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

4. Now guys please add the below code inside angulardemo/angular.json file to styles and scripts:

"styles": [
              ...
              "assets/css/all.min.css",
              "assets/css/bootstrap.min.css",
              "assets/css/style.css"
          ],
"scripts": [
              ...
               "assets/js/jquery-3.4.1.min.js",
               "assets/js/bootstrap.bundle.min.js",
               "assets/js/all.min.js"
           ]
...

5. Now friends we just need to add below code into angulardemo/src/app/header/header.component.html file:

<!-- header section -->
<header id="header" class="header">
  <!-- navbar -->
  <nav class="navbar navbar-expand-lg navbar-light">
    <a routerLink="/" class="navbar-brand">
      <img src="assets/img/logo.png" alt="company logo" />
    </a>
    <button
      class="navbar-toggler"
      type="button"
      data-toggle="collapse"
      data-target="#myNavbar"
    >
      <i class="fas fa-bars"></i>
    </button>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="navbar-nav mx-auto">
        <li class="nav-item mx-2" routerLinkActive="nav-active" [routerLinkActiveOptions]="{ exact: true }">
          <a routerLink="/" class="nav-link">Home</a>
        </li>
        <li class="nav-item mx-2"  routerLinkActive="nav-active">
          <a routerLink="/products" class="nav-link">Products</a>
        </li>
        <li class="nav-item mx-2"  routerLinkActive="nav-active">
          <a routerLink="/singleproduct" class="nav-link">Single Product</a>
        </li>
        <li class="nav-item mx-2"  routerLinkActive="nav-active">
          <a routerLink="/store" class="nav-link">Store</a>
        </li>
      </ul>
    </div>
    <div class="navbar-icons d-none d-lg-flex">
      <!-- single icon -->
      <div class="navbar-icon mx-2"><i class="fas fa-search"></i></div>
      <!-- end of single icon -->
      <!-- single icon -->
      <a routerLink="/store" class="navbar-icon mx-2 navbar-cart-icon">
        <i class="fas fa-shopping-cart"></i>
        <div class="cart-items">2</div>
      </a>
      <!-- end of  single icon -->
    </div>
  </nav>
  <!-- end of navbar -->
</header>
<!-- end of header section -->

6. Now friends we just need to add below code into angulardemo/src/app/footer/footer.component.html file:

<!-- footer section -->
<footer class="footer py-5">
   <div class="container">
     <div class="row">
       <div class="col-10 mx-auto text-center">
         <h1 class="text-uppercase font-weight-bold text-yellow d-inline-block footer-title">
           comfy sloth
         </h1>
         <!-- footer icons -->
         <div class="footer-icons d-flex justify-content-center my-5">
           <!-- single icon -->
           <a href="" class="footer-icon mx-2">
             <div class="fab fa-facebook"></div>
           </a>
           <!-- end of single icon -->
           <!-- single icon -->
           <a href="" class="footer-icon mx-2">
             <div class="fab fa-twitter"></div>
           </a>
           <!-- end of single icon -->
           <!-- single icon -->
           <a href="" class="footer-icon mx-2">
             <div class="fab fa-youtube"></div>
           </a>
           <!-- end of single icon -->
           <!-- single icon -->
           <a href="" class="footer-icon mx-2">
             <div class="fab fa-google-plus"></div>
           </a>
           <!-- end of single icon -->
           <!-- single icon -->
           <a href="" class="footer-icon mx-2">
             <div class="fab fa-instagram"></div>
           </a>
           <!-- end of single icon -->
         </div>
         <!-- footer icons -->
         <p class="text-muted text-capitalize w-75 mx-auto text-center">
           Lorem ipsum dolor, sit amet consectetur adipisicing elit. Labore illum illo exercitationem ex porro consequuntur quae mollitia qui accusamus! Molestiae.
         </p>
         <div class="footer-contact d-flex justify-content-around mt-5">
           <!-- single contact -->
           <div class="text-capitalize">
             <span class="contact-icon mr-2">
               <i class="fas fa-map"></i>
             </span>
             123 Main Street, LUdhiana
           </div>
           <!-- end of single contact -->
           <!-- single contact -->
           <div class="text-capitalize">
             <span class="contact-icon mr-2">
               <i class="fas fa-phone"></i>
             </span>
             Phone : + (1111) 111 11111
           </div>
           <!-- end of single contact -->
           <!-- single contact -->
           <div class="text-capitalize">
             <span class="contact-icon mr-2">
               <i class="fas fa-envelope"></i>
             </span>
             Email : Eamil@Email.Com
           </div>
           <!-- end of single contact -->
         </div>
       </div>
     </div>
   </div>
 </footer>
 <!-- end of footer section -->
 <!-- modal -->
 <div class="modal fade" id="productModal" tabindex="-1" role="dialog">
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <!-- modal header -->
       <div class="modal-header">
         <h5 class="modal-title text-capitalize">product info</h5>
         <button type="button" class="close" data-dismiss="modal">
           <span aria-hidden="true">&times;</span>
         </button>
       </div>
       <!--end of  modal header -->
       <!-- modal body -->
       <div class="modal-body">
         <div class="row">
           <div class="col text-center">
             <img src="img/img-products/product-1.png" class="img-fluid" alt="" />
             <!-- ratings -->
             <div class="ratings">
               <span class="rating-icon"><i class="fas fa-star"></i></span>
               <span class="rating-icon"><i class="fas fa-star"></i></span>
               <span class="rating-icon"><i class="fas fa-star"></i></span>
               <span class="rating-icon"><i class="fas fa-star"></i></span>
               <span class="rating-icon"><i class="far fa-star"></i></span>
               <span class="text-capitalize">(25 customer reviews)</span>
             </div>
             <!-- end of ratings -->
             <h2 class="text-uppercase my-2">premium office armchair</h2>
             <h2>$10.00 - $200.00</h2>
             <p class="lead text-muted">
               Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi,
               porro.
             </p>
             <!-- colors -->
             <h5 class="text-uppercase">
               colors :
               <span class="d-inline-block products-color products-color-black mr-2"></span>
               <span class="d-inline-block products-color products-color-red mr-2"></span>
               <span class="d-inline-block products-color products-color-blue mr-2"></span>
             </h5>
             <!-- end of colors -->
             <!-- sizes -->
             <h5 class="text-uppercase">
               sizes : <span class="mx-2">xs</span> <span class="mx-2">s</span>
               <span class="mx-2">m</span> <span class="mx-2">l</span>
               <span class="mx-2">xl</span>
             </h5>
             <div class="d-flex flex-wrap">
               <!-- cart buttons -->
               <div class="d-flex my-2">
                 <span class="btn btn-black mx-1">-</span>
                 <span class="btn btn-black mx-1">4</span>
                 <span class="btn btn-black mx-1">+</span>
               </div>
               <button class="btn btn-black my-2 mx-2">wishlist</button>
               <button class="btn btn-yellow my-2 mx-2">add to cart</button>
             </div>
           </div>
         </div>
       </div>
       <!-- end modal body -->
       <div class="modal-footer">
         <button type="button" class="btn btn-danger" data-dismiss="modal">close</button>
       </div>
     </div>
   </div>
 </div>
 <!-- end of modal -->

7. Now friends we just need to add below code into angulardemo/src/app/home/home.component.html file:

<div class="banner d-flex align-items-center pl-3 pl-lg-5">
    <div>
      <h1 class="text-slanted text-capitalize mb-0">
        Minimalist
      </h1>
      <h1 class="text-lowercase font-weight-bold">
        interior style
      </h1>
      <a href="#" class="btn btn-yellow"> view collection </a>
    </div>
</div>
 <!-- services section -->
 <section id="services" class="services py-5 text-center">
    <div class="container">
      <div class="row">
        <!-- single service --> 
        <div class="col-10 mx-auto col-md-6 col-lg-4 my-3">
          <span class="service-icon">
            <i class="fas fa-parachute-box"></i>
          </span>
          <h5 class="text-uppercase font-weight-bold">
            free shipping
          </h5>
          <p class="text-muted text-capitalize">
            free shipping on all order over 100.00
          </p>
        </div>
        <!-- end of single service -->
        <!-- single service --> 
        <div class="col-10 mx-auto col-md-6 col-lg-4 my-3">
          <span class="service-icon">
            <i class="fas fa-phone-volume"></i>
          </span>
          <h5 class="text-uppercase font-weight-bold">
            ONLINE SUPPORT 24/7
          </h5>
          <p class="text-muted text-capitalize">
            We Will Assist You With Your Inquiries
          </p>
        </div>
        <!-- end of single service -->
        <!-- single service --> 
        <div class="col-10 mx-auto col-md-6 col-lg-4 my-3">
          <span class="service-icon">
            <i class="fas fa-dollar-sign"></i>
          </span>
          <h5 class="text-uppercase font-weight-bold">
            MONEY BACK GURANTEE
          </h5>
          <p class="text-muted text-capitalize">
            Free 100% Refund For 30 Da
          </p>
        </div>
        <!-- end of single service -->
      </div>
    </div>
  </section>
  <!-- end of services section -->

  <!-- home categories -->
  <section id="home-categories" class="home-categories py-5">
    <div class="container">
      <div class="row">
        <!-- categories title -->
        <div class="col-10 mx-auto col-md-6 col-lg-3 align-self-center">
          <h5 class="text-uppercase">
            product categories
          </h5>
          <p class="text-muted text-capitalize">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore neque minus in error sunt laudantium totam nemo accusamus iure placeat.
          </p>
          <a href="" class="categorie-link text-weight-bold text-capitalize">
            view all categories
          </a>
          <div class="categorie-underline">
          </div>
        </div>
        <!-- end of categories title -->
        <!-- main categories -->
        <div class="col-10 mx-auto col-md-6 col-lg-9 my-3">
          <div class="row">
            <!-- single category -->
            <div class="col-md-6 col-lg-3 my-3">
              <div class="category-container">
                <img src="assets/img/cagetogoryImg/bathroom-category.jpeg" class="img-fluid category-img" alt="">
                <a routerLink="/products" class="category-link">
                  <h6 class="text-uppercase mb-0">
                    bathroom
                  </h6>
                  <p class="text-yellow mb-0">
                    50 items
                  </p>
                </a>
              </div>
            </div>
            <!-- end of single category -->
            <!-- single category -->
            <div class="col-md-6 col-lg-3 my-3">
              <div class="category-container">
                <img src="assets/img/cagetogoryImg/kitchen-category.jpeg" class="img-fluid category-img" alt="">
                <a routerLink="/products" class="category-link">
                  <h6 class="text-uppercase mb-0">
                    kitchen
                  </h6>
                  <p class="text-yellow mb-0">
                    20 items
                  </p>
                </a>
              </div>
            </div>
            <!-- end of single category -->
            <!-- single category -->
            <div class="col-md-6 col-lg-3 my-3">
              <div class="category-container">
                <img src="assets/img/cagetogoryImg/livingroom-category.jpeg" class="img-fluid category-img" alt="">
                <a routerLink="/products" class="category-link">
                  <h6 class="text-uppercase mb-0">
                    livingroom
                  </h6>
                  <p class="text-yellow mb-0">
                    25 items
                  </p>
                </a>
              </div>
            </div>
            <!-- end of single category -->
            <!-- single category -->
            <div class="col-md-6 col-lg-3 my-3">
              <div class="category-container">
                <img src="assets/img/cagetogoryImg/patio-category.jpeg" class="img-fluid category-img" alt="">
                <a routerLink="/products" class="category-link">
                  <h6 class="text-uppercase mb-0">
                    patio
                  </h6>
                  <p class="text-yellow mb-0">
                    10 items
                  </p>
                </a>
              </div>
            </div>
            <!-- end of single category -->
          </div>
        </div>
        <!-- end of main categories -->
      </div>
    </div>
  </section>
  <!-- end of home categories -->

  <!-- home filler -->
  <section id="home-filler">
    <div class="container-fluid">
      <div class="row home-filler align-items-center">
        <div class="col-10 mx-auto text-center text-white">
          <h4 class="text-uppercase font-weight-bold">
            smart furniture collection
          </h4>
          <p class="text-capitalize">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, accusantium
          </p>
          <a href="#" class="text-capitalize collection-link text-yellow">
            view collection
          </a>
          <div class="collection-underline"></div>
        </div>
      </div>
    </div>
  </section>
  <!-- end of home filler -->

  <!-- featured section -->
  <section id="featured" class="featured py-5">
    <div class="container">
      <div class="row my-3">
        <div class="col-10 mx-auto text-center">
          <h1 class="text-uppercase">
            featured products
          </h1>
          <p class="text-muted">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur, deleniti?
          </p>
        </div>
      </div>
      <div class="row">
        <!-- single product -->
        <div class="col-10 mx-auto col-md-6 col-lg-4">
          <div class="featured-container p-5">
            <img src="assets/img/img-products/product-1.png" alt="" class="img-fluid">
            <span class="featured-search-icon" data-toggle="modal" data-target="#productModal">
              <i class="fas fa-search"></i>
            </span>
            <a href="#" class="featured-store-link text-capitalize">add to cart</a>
          </div>
          <h6 class="text-capitalize text-center my-2">
            special product
          </h6>
          <h6 class="text-center">
            <span class="text-muted old-price mx-2">$200</span>
            <span>$100</span>
          </h6>
        </div>
        <!-- end of single product -->
        <!-- single product -->
        <div class="col-10 mx-auto col-md-6 col-lg-4">
          <div class="featured-container p-5">
            <img src="assets/img/img-products/product-6.png" alt="" class="img-fluid">
            <span class="featured-search-icon" data-toggle="modal" data-target="#productModal">
              <i class="fas fa-search"></i>
            </span>
            <a href="#" class="featured-store-link text-capitalize">add to cart</a>
          </div>
          <h6 class="text-capitalize text-center my-2">
            special product
          </h6>
          <h6 class="text-center">
            <span class="text-muted old-price mx-2">$200</span>
            <span>$100</span>
          </h6>
        </div>
        <!-- end of single product -->
        <!-- single product -->
        <div class="col-10 mx-auto col-md-6 col-lg-4">
          <div class="featured-container p-5">
            <img src="assets/img/img-products/product-2.png" alt="" class="img-fluid">
            <span class="featured-search-icon" data-toggle="modal" data-target="#productModal">
              <i class="fas fa-search"></i>
            </span>
            <a href="#" class="featured-store-link text-capitalize">add to cart</a>
          </div>
          <h6 class="text-capitalize text-center my-2">
            special product
          </h6>
          <h6 class="text-center">
            <span class="text-muted old-price mx-2">$200</span>
            <span>$100</span>
          </h6>
        </div>
        <!-- end of single product -->
        <!-- single product -->
        <div class="col-10 mx-auto col-md-6 col-lg-4">
          <div class="featured-container p-5">
            <img src="assets/img/img-products/product-3.png" alt="" class="img-fluid">
            <span class="featured-search-icon" data-toggle="modal" data-target="#productModal">
              <i class="fas fa-search"></i>
            </span>
            <a href="#" class="featured-store-link text-capitalize">add to cart</a>
          </div>
          <h6 class="text-capitalize text-center my-2">
            special product
          </h6>
          <h6 class="text-center">
            <span class="text-muted old-price mx-2">$200</span>
            <span>$100</span>
          </h6>
        </div>
        <!-- end of single product -->
        <!-- single product -->
        <div class="col-10 mx-auto col-md-6 col-lg-4">
          <div class="featured-container p-5">
            <img src="assets/img/img-products/product-4.png" alt="" class="img-fluid">
            <span class="featured-search-icon" data-toggle="modal" data-target="#productModal">
              <i class="fas fa-search"></i>
            </span>
            <a href="#" class="featured-store-link text-capitalize">add to cart</a>
          </div>
          <h6 class="text-capitalize text-center my-2">
            special product
          </h6>
          <h6 class="text-center">
            <span class="text-muted old-price mx-2">$200</span>
            <span>$100</span>
          </h6>
        </div>
        <!-- end of single product -->
        <!-- single product -->
        <div class="col-10 mx-auto col-md-6 col-lg-4">
          <div class="featured-container p-5">
            <img src="assets/img/img-products/product-5.png" alt="" class="img-fluid">
            <span class="featured-search-icon" data-toggle="modal" data-target="#productModal">
              <i class="fas fa-search"></i>
            </span>
            <a href="#" class="featured-store-link text-capitalize">add to cart</a>
          </div>
          <h6 class="text-capitalize text-center my-2">
            special product
          </h6>
          <h6 class="text-center">
            <span class="text-muted old-price mx-2">$200</span>
            <span>$100</span>
          </h6>
        </div>
        <!-- end of single product -->
      </div>
    </div>
  </section>
  <!-- end of featured section -->

  <!-- partners -->
  <section class="partners py-5">
    <div class="container">
      <div class="row">
        <!-- compnay carousel -->
        <div class="col-6 col-md-6 col-lg-4 mx-auto">
          <div
            id="partnerCarousel"
            class="carousel slide "
            data-ride="carousel"
          >
            <div class="carousel-inner">
              <!-- single item -->
              <div class="carousel-item active">
                <img
                  src="assets/img/company-logos/company-logo-1.png"
                  class="d-block w-100"
                  alt="partner company"
                />
              </div>
              <!-- end single item -->
              <!-- single item -->
              <div class="carousel-item ">
                <img
                  src="assets/img/company-logos/company-logo-2.png"
                  class="d-block w-100"
                  alt="partner company"
                />
              </div>
              <!-- end single item -->
              <!-- single item -->
              <div class="carousel-item ">
                <img
                  src="assets/img/company-logos/company-logo-3.png"
                  class="d-block w-100"
                  alt="partner company"
                />
              </div>
              <!-- end single item -->
              <!-- single item -->
              <div class="carousel-item ">
                <img
                  src="assets/img/company-logos/company-logo-4.png"
                  class="d-block w-100"
                  alt="partner company"
                />
              </div>
              <!-- end single item -->
              <!-- single item -->
              <div class="carousel-item ">
                <img
                  src="assets/img/company-logos/company-logo-5.png"
                  class="d-block w-100"
                  alt="partner company"
                />
              </div>
              <!-- end single item -->
              <!-- single item -->
              <div class="carousel-item">
                <img
                  src="assets/img/company-logos/company-logo-6.png"
                  class="d-block w-100"
                  alt="partner company"
                />
              </div>
              <!-- end single item -->
            </div>
            <a
              href="#partnerCarousel"
              class="carousel-control-prev"
              role="button"
              data-slide="prev"
            >
              <i class="fas fa-arrow-left"></i>
            </a>
            <a
              href="#partnerCarousel"
              class="carousel-control-next"
              role="button"
              data-slide="next"
            >
              <i class="fas fa-arrow-right"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- end of  partners -->

  <!-- newsletter section -->
  <section id="newsletter" class="newsletter py-5">
    <div class="container">
      <div class="row">
        <div class="col-10 mx-auto text-center">
          <h2 class="text-uppercase">
            newsletter
          </h2>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti blanditiis similique eum, aut culpa maiores cupiditate alias exercitationem error nesciunt.
          </p>
          <form action="">
            <div class="input-group mt-5 mb-4">
              <input type="text" class="text-capitalize form-control" placeholder="enter your email">
              <div class="input-group-append">
              <div class="input-group-text form-icon">
                <i class="fas fa-envelope"></i>
              </div>
              </div>
            </div>
            <button type="submit" class=" btn btn-yellow">subscribe</button>
          </form>
        </div>
      </div>
    </div>
  </section>
  <!-- end of newsletter section -->

  <!-- skills section -->
  <section id="skills" class="skills py-5">
    <div class="container">
      <div class="row">
        <div class="col-10 col-md-6 col-lg-4 mx-auto d-flex my-3">
          <div class="skill-icon mr-3">
            <i class="fas fa-truck"></i>
          </div>
          <div class="skill-text">
            <h3 class="text-uppercase text-white">
              free shipping
            </h3>
            <p class="text-capitalize text-muted">
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odio, obcaecati!
            </p>
          </div>
        </div>
        <div class="col-10 col-md-6 col-lg-4 mx-auto d-flex my-3">
          <div class="skill-icon mr-3">
            <i class="fas fa-comment-dollar"></i>
          </div>
          <div class="skill-text">
            <h3 class="text-uppercase text-white">
              price promise
            </h3>
            <p class="text-capitalize text-muted">
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odio, obcaecati!
            </p>
          </div>
        </div>
        <div class="col-10 col-md-6 col-lg-4 mx-auto d-flex my-3">
          <div class="skill-icon mr-3">
            <i class="fas fa-award"></i>
          </div>
          <div class="skill-text">
            <h3 class="text-uppercase text-white">
              lifetime warranty
            </h3>
            <p class="text-capitalize text-muted">
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odio, obcaecati!
            </p>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- end of skills section -->

8. Now friends we just need to add below code into angulardemo/src/app/products/products.component.html file:

<div class="banner-product d-flex pl-3 pl-lg-5 align-items-center text-center justify-content-center">
    <div>
      <h1 class="text-slanted text-capitalize display-4 text-yellow">
          comfy sloth
      </h1>
      <h1 class="text-capitalize display-4 font-weight-bold">
          our products
      </h1>
    </div>
</div>
<!-- product section  -->
<section id="products" class="products">
    <div class="container-fluid">
      <div class="row">
        <!-- product info -->
        <div class="col-10 mx-auto col-md-5 col-lg-3 text-capitalize my-3 px-5">
          <!-- products categories -->
          <div class="products-categories-title my-4">
            <h6 class="text-uppercase">
              shop by categories
            </h6>
            <div class="products-categories-underline"></div>
          </div>
          <!-- end of title -->
          <!-- single link -->
          <a href="#" class="products-category-link d-block">
            <p class="mb-0">
              kitchen
            </p>
          </a>
          <a href="#" class="products-category-link d-block">
            <p class="mb-0">
              bath room
            </p>
          </a>
          <a href="#" class="products-category-link d-block">
            <p class="mb-0">
              living room
            </p>
          </a>
          <a href="#" class="products-category-link d-block">
            <p class="mb-0">
              patio
            </p>
          </a>
          <a href="#" class="products-category-link d-block">
            <p class="mb-0">
              bedroom
            </p>
          </a>
          <!-- end of single link -->
          <div class="products-categories-title my-4">
            <h6 class="text-uppercase">
              shop by price
            </h6>
            <div class="products-categories-underline"></div>
          </div>
          <!-- end of title -->
          <form action="">
            <div class="form-group">
              <label for="price-range">Range : $0 - $1000</label>
              <input type="range" class="form-control-range" id="price-range">
            </div>
            <div class="input-group">
              <div class="input-group-prepend">
                <span class="input-group-text form-icon">
                  <i class="fas fa-search"></i>
                </span>
              </div>
              <input type="text" class="form-control text-capitalize" placeholder="search by name">
            </div>
          </form>
          <div class="products-categories-title my-4">
            <h6 class="text-uppercase">
              shop by color
            </h6>
            <div class="products-categories-underline"></div>
          </div>
          <!-- single color -->
          <a href="#">
            <p class="text-capitalize mb-0">
              <span class="d-inline-block products-color products-color-black mr-2">
              </span>
              black (5)
            </p>
          </a>
          <!-- end of single color -->
          <!-- single color -->
          <a href="#">
            <p class="text-capitalize mb-0">
              <span class="d-inline-block products-color products-color-red mr-2">
              </span>
              red (6)
            </p>
          </a>
          <!-- end of single color -->
          <!-- single color -->
          <a href="#">
            <p class="text-capitalize mb-0">
              <span class="d-inline-block products-color products-color-blue mr-2">
              </span>
              blue (10)
            </p>
          </a>
          <!-- end of single color -->
          <!-- single color -->
          <a href="#">
            <p class="text-capitalize mb-0">
              <span class="d-inline-block products-color products-color-yellow mr-2">
              </span>
              yellow (3)
            </p>
          </a>
          <!-- end of single color -->
          <!-- single color -->
          <a href="#">
            <p class="text-capitalize mb-0">
              <span class="d-inline-block products-color products-color-green mr-2">
              </span>
              green (7)
            </p>
          </a>
          <!-- end of single color -->
          <!-- end of title -->
          <!-- end of products categories -->
        </div>
        <!-- end of product info -->
        <!-- product img -->
        <div class="col-10 mx-auto col-md-7 col-lg-9 my-3">
          <div class="row">
            <!-- single product -->
        <div class="col-10 mx-auto col-md-6 col-lg-4">
          <div class="featured-container p-5">
            <img src="assets/img/img-products/product-7.png" alt="" class="img-fluid">
            <span class="featured-search-icon" data-toggle="modal" data-target="#productModal">
              <i class="fas fa-search"></i>
            </span>
            <a href="#" class="featured-store-link text-capitalize">add to cart</a>
          </div>
          <h6 class="text-capitalize text-center my-2">
            special product
          </h6>
          <h6 class="text-center">
            <span class="text-muted old-price mx-2">$200</span>
            <span>$100</span>
          </h6>
        </div>
        <!-- end of single product -->
        <!-- single product -->
        <div class="col-10 mx-auto col-md-6 col-lg-4">
          <div class="featured-container p-5">
            <img src="assets/img/img-products/product-8.png" alt="" class="img-fluid">
            <span class="featured-search-icon" data-toggle="modal" data-target="#productModal">
              <i class="fas fa-search"></i>
            </span>
            <a href="#" class="featured-store-link text-capitalize">add to cart</a>
          </div>
          <h6 class="text-capitalize text-center my-2">
            special product
          </h6>
          <h6 class="text-center">
            <span class="text-muted old-price mx-2">$200</span>
            <span>$100</span>
          </h6>
        </div>
        <!-- end of single product -->
        <!-- single product -->
        <div class="col-10 mx-auto col-md-6 col-lg-4">
          <div class="featured-container p-5">
            <img src="assets/img/img-products/product-9.png" alt="" class="img-fluid">
            <span class="featured-search-icon" data-toggle="modal" data-target="#productModal">
              <i class="fas fa-search"></i>
            </span>
            <a href="#" class="featured-store-link text-capitalize">add to cart</a>
          </div>
          <h6 class="text-capitalize text-center my-2">
            special product
          </h6>
          <h6 class="text-center">
            <span class="text-muted old-price mx-2">$200</span>
            <span>$100</span>
          </h6>
        </div>
        <!-- end of single product -->
        <!-- single product -->
        <div class="col-10 mx-auto col-md-6 col-lg-4">
          <div class="featured-container p-5">
            <img src="assets/img/img-products/product-10.png" alt="" class="img-fluid">
            <span class="featured-search-icon" data-toggle="modal" data-target="#productModal">
              <i class="fas fa-search"></i>
            </span>
            <a href="#" class="featured-store-link text-capitalize">add to cart</a>
          </div>
          <h6 class="text-capitalize text-center my-2">
            special product
          </h6>
          <h6 class="text-center">
            <span class="text-muted old-price mx-2">$200</span>
            <span>$100</span>
          </h6>
        </div>
        <!-- end of single product -->
        <!-- single product -->
        <div class="col-10 mx-auto col-md-6 col-lg-4">
          <div class="featured-container p-5">
            <img src="assets/img/img-products/product-11.png" alt="" class="img-fluid">
            <span class="featured-search-icon" data-toggle="modal" data-target="#productModal">
              <i class="fas fa-search"></i>
            </span>
            <a href="#" class="featured-store-link text-capitalize">add to cart</a>
          </div>
          <h6 class="text-capitalize text-center my-2">
            special product
          </h6>
          <h6 class="text-center">
            <span class="text-muted old-price mx-2">$200</span>
            <span>$100</span>
          </h6>
        </div>
        <!-- end of single product -->
        <!-- single product -->
        <div class="col-10 mx-auto col-md-6 col-lg-4">
          <div class="featured-container p-5">
            <img src="assets/img/img-products/product-12.png" alt="" class="img-fluid">
            <span class="featured-search-icon" data-toggle="modal" data-target="#productModal">
              <i class="fas fa-search"></i>
            </span>
            <a href="#" class="featured-store-link text-capitalize">add to cart</a>
          </div>
          <h6 class="text-capitalize text-center my-2">
            special product
          </h6>
          <h6 class="text-center">
            <span class="text-muted old-price mx-2">$200</span>
            <span>$100</span>
          </h6>
        </div>
        <!-- end of single product -->
          </div>
        </div>
        <!-- end of product img -->
      </div>
    </div>
  </section>
  <!-- end of product section  -->

  <!-- featured section -->
  <section id="featured" class="featured py-5">
    <div class="container">
      <div class="row my-3">
        <div class="col-10 mx-auto text-center">
          <h1 class="text-uppercase">
            featured products
          </h1>
          <p class="text-muted">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur, deleniti?
          </p>
        </div>
      </div>
      <div class="row">
        <!-- single product -->
        <div class="col-10 mx-auto col-md-6 col-lg-4">
          <div class="featured-container p-5">
            <img src="assets/img/img-products/product-1.png" alt="" class="img-fluid">
            <span class="featured-search-icon" data-toggle="modal" data-target="#productModal">
              <i class="fas fa-search"></i>
            </span>
            <a href="#" class="featured-store-link text-capitalize">add to cart</a>
          </div>
          <h6 class="text-capitalize text-center my-2">
            special product
          </h6>
          <h6 class="text-center">
            <span class="text-muted old-price mx-2">$200</span>
            <span>$100</span>
          </h6>
        </div>
        <!-- end of single product -->
        <!-- single product -->
        <div class="col-10 mx-auto col-md-6 col-lg-4">
          <div class="featured-container p-5">
            <img src="assets/img/img-products/product-6.png" alt="" class="img-fluid">
            <span class="featured-search-icon" data-toggle="modal" data-target="#productModal">
              <i class="fas fa-search"></i>
            </span>
            <a href="#" class="featured-store-link text-capitalize">add to cart</a>
          </div>
          <h6 class="text-capitalize text-center my-2">
            special product
          </h6>
          <h6 class="text-center">
            <span class="text-muted old-price mx-2">$200</span>
            <span>$100</span>
          </h6>
        </div>
        <!-- end of single product -->
        <!-- single product -->
        <div class="col-10 mx-auto col-md-6 col-lg-4">
          <div class="featured-container p-5">
            <img src="assets/img/img-products/product-2.png" alt="" class="img-fluid">
            <span class="featured-search-icon" data-toggle="modal" data-target="#productModal">
              <i class="fas fa-search"></i>
            </span>
            <a href="#" class="featured-store-link text-capitalize">add to cart</a>
          </div>
          <h6 class="text-capitalize text-center my-2">
            special product
          </h6>
          <h6 class="text-center">
            <span class="text-muted old-price mx-2">$200</span>
            <span>$100</span>
          </h6>
        </div>
        <!-- end of single product -->
        <!-- single product -->
        <div class="col-10 mx-auto col-md-6 col-lg-4">
          <div class="featured-container p-5">
            <img src="assets/img/img-products/product-3.png" alt="" class="img-fluid">
            <span class="featured-search-icon" data-toggle="modal" data-target="#productModal">
              <i class="fas fa-search"></i>
            </span>
            <a href="#" class="featured-store-link text-capitalize">add to cart</a>
          </div>
          <h6 class="text-capitalize text-center my-2">
            special product
          </h6>
          <h6 class="text-center">
            <span class="text-muted old-price mx-2">$200</span>
            <span>$100</span>
          </h6>
        </div>
        <!-- end of single product -->
        <!-- single product -->
        <div class="col-10 mx-auto col-md-6 col-lg-4">
          <div class="featured-container p-5">
            <img src="assets/img/img-products/product-4.png" alt="" class="img-fluid">
            <span class="featured-search-icon" data-toggle="modal" data-target="#productModal">
              <i class="fas fa-search"></i>
            </span>
            <a href="#" class="featured-store-link text-capitalize">add to cart</a>
          </div>
          <h6 class="text-capitalize text-center my-2">
            special product
          </h6>
          <h6 class="text-center">
            <span class="text-muted old-price mx-2">$200</span>
            <span>$100</span>
          </h6>
        </div>
        <!-- end of single product -->
        <!-- single product -->
        <div class="col-10 mx-auto col-md-6 col-lg-4">
          <div class="featured-container p-5">
            <img src="assets/img/img-products/product-5.png" alt="" class="img-fluid">
            <span class="featured-search-icon" data-toggle="modal" data-target="#productModal">
              <i class="fas fa-search"></i>
            </span>
            <a href="#" class="featured-store-link text-capitalize">add to cart</a>
          </div>
          <h6 class="text-capitalize text-center my-2">
            special product
          </h6>
          <h6 class="text-center">
            <span class="text-muted old-price mx-2">$200</span>
            <span>$100</span>
          </h6>
        </div>
        <!-- end of single product -->
      </div>
    </div>
  </section>
  <!-- end of featured section -->

  <!-- partners -->
  <section class="partners py-5">
    <div class="container">
      <div class="row">
        <!-- compnay carousel -->
        <div class="col-6 col-md-6 col-lg-4 mx-auto">
          <div
            id="partnerCarousel"
            class="carousel slide "
            data-ride="carousel"
          >
            <div class="carousel-inner">
              <!-- single item -->
              <div class="carousel-item active">
                <img
                  src="assets/img/company-logos/company-logo-1.png"
                  class="d-block w-100"
                  alt="partner company"
                />
              </div>
              <!-- end single item -->
              <!-- single item -->
              <div class="carousel-item ">
                <img
                  src="assets/img/company-logos/company-logo-2.png"
                  class="d-block w-100"
                  alt="partner company"
                />
              </div>
              <!-- end single item -->
              <!-- single item -->
              <div class="carousel-item ">
                <img
                  src="assets/img/company-logos/company-logo-3.png"
                  class="d-block w-100"
                  alt="partner company"
                />
              </div>
              <!-- end single item -->
              <!-- single item -->
              <div class="carousel-item ">
                <img
                  src="assets/img/company-logos/company-logo-4.png"
                  class="d-block w-100"
                  alt="partner company"
                />
              </div>
              <!-- end single item -->
              <!-- single item -->
              <div class="carousel-item ">
                <img
                  src="assets/img/company-logos/company-logo-5.png"
                  class="d-block w-100"
                  alt="partner company"
                />
              </div>
              <!-- end single item -->
              <!-- single item -->
              <div class="carousel-item">
                <img
                  src="assets/img/company-logos/company-logo-6.png"
                  class="d-block w-100"
                  alt="partner company"
                />
              </div>
              <!-- end single item -->
            </div>
            <a
              href="#partnerCarousel"
              class="carousel-control-prev"
              role="button"
              data-slide="prev"
            >
              <i class="fas fa-arrow-left"></i>
            </a>
            <a
              href="#partnerCarousel"
              class="carousel-control-next"
              role="button"
              data-slide="next"
            >
              <i class="fas fa-arrow-right"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- end of  partners -->

  <!-- newsletter section -->
  <section id="newsletter" class="newsletter py-5">
    <div class="container">
      <div class="row">
        <div class="col-10 mx-auto text-center">
          <h2 class="text-uppercase">
            newsletter
          </h2>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti blanditiis similique eum, aut culpa maiores cupiditate alias exercitationem error nesciunt.
          </p>
          <form action="">
            <div class="input-group mt-5 mb-4">
              <input type="text" class="text-capitalize form-control" placeholder="enter your email">
              <div class="input-group-append">
              <div class="input-group-text form-icon">
                <i class="fas fa-envelope"></i>
              </div>
              </div>
            </div>
            <button type="submit" class=" btn btn-yellow">subscribe</button>
          </form>
        </div>
      </div>
    </div>
  </section>
  <!-- end of newsletter section -->

  <!-- skills section -->
  <section id="skills" class="skills py-5">
    <div class="container">
      <div class="row">
        <div class="col-10 col-md-6 col-lg-4 mx-auto d-flex my-3">
          <div class="skill-icon mr-3">
            <i class="fas fa-truck"></i>
          </div>
          <div class="skill-text">
            <h3 class="text-uppercase text-white">
              free shipping
            </h3>
            <p class="text-capitalize text-muted">
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odio, obcaecati!
            </p>
          </div>
        </div>
        <div class="col-10 col-md-6 col-lg-4 mx-auto d-flex my-3">
          <div class="skill-icon mr-3">
            <i class="fas fa-comment-dollar"></i>
          </div>
          <div class="skill-text">
            <h3 class="text-uppercase text-white">
              price promise
            </h3>
            <p class="text-capitalize text-muted">
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odio, obcaecati!
            </p>
          </div>
        </div>
        <div class="col-10 col-md-6 col-lg-4 mx-auto d-flex my-3">
          <div class="skill-icon mr-3">
            <i class="fas fa-award"></i>
          </div>
          <div class="skill-text">
            <h3 class="text-uppercase text-white">
              lifetime warranty
            </h3>
            <p class="text-capitalize text-muted">
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odio, obcaecati!
            </p>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- end of skills section -->

9. Now friends we just need to add below code into angulardemo/src/app/singleproduct/singleproduct.component.html file:

<div class="banner-single-product d-flex pl-3 pl-lg-5 align-items-center text-center justify-content-center">
    <div>
      <h1 class="text-slanted text-capitalize display-4 text-yellow">
          comfy sloth
      </h1>
      <h1 class="text-capitalize display-4 font-weight-bold">
          single product
      </h1>
    </div>
</div>
<!-- single product -->
<section class="single-product py-5">
    <div class="container">
      <div class="row">
        <div class="col-10 mx-auto col-lg-4 my-5 text-center">
          <div class="single-product-img-container">
            <img src="assets/img/img-products/product-1.png" alt="" class="img-fluid">
          </div>
          <div class="row simgle-product-photos mt-3">
            <!-- single photo -->
            <div class="col-2 col-sm-2 p-1 single-product-photo">
              <img src="assets/img/img-products/product-1.png" alt="" class="img-fluid">
            </div>
            <!-- end of single photo -->
            <!-- single photo -->
            <div class="col-2 col-sm-2 p-1 single-product-photo">
              <img src="assets/img/img-products/product-1.png" alt="" class="img-fluid">
            </div>
            <!-- end of single photo -->
            <!-- single photo -->
            <div class="col-2 col-sm-2 p-1 single-product-photo">
              <img src="assets/img/img-products/product-1.png" alt="" class="img-fluid">
            </div>
            <!-- end of single photo -->
            <!-- single photo -->
            <div class="col-2 col-sm-2 p-1 single-product-photo">
              <img src="assets/img/img-products/product-1.png" alt="" class="img-fluid">
            </div>
            <!-- end of single photo -->
            <!-- single photo -->
            <div class="col-2 col-sm-2 p-1 single-product-photo">
              <img src="assets/img/img-products/product-1.png" alt="" class="img-fluid">
            </div>
            <!-- end of single photo -->
            <!-- single photo -->
            <div class="col-2 col-sm-2 p-1 single-product-photo">
              <img src="assets/img/img-products/product-1.png" alt="" class="img-fluid">
            </div>
            <!-- end of single photo -->
          </div>
        </div>
        <!-- info -->
        <div class="col-10 col-lg-8 mx-auto px-lg-5 single-product-info my-5">
          <!-- ratings -->
          <div class="ratings">
            <span class="rating-icon">
              <i class="fas fa-star"></i>
            </span>
            <span class="rating-icon">
              <i class="fas fa-star"></i>
            </span>
            <span class="rating-icon">
              <i class="fas fa-star"></i>
            </span>
            <span class="rating-icon">
              <i class="fas fa-star"></i>
            </span>
            <span class="rating-icon">
              <i class="far fa-star"></i>
            </span>
            <span class="text-capitalize">
              (25 Customer Reviews)
            </span>
          </div>
          <!-- end of ratings -->
          <h2 class="text-uppercase my-2">
            PREMIUM OFFICE ARMCHAIR
          </h2>
          <h2 class="text-uppercase my-2">
            $10.00 - $200.00
          </h2>
          <p class="lead text-muted">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, quae!
          </p>
          <!-- colors -->
          <h5 class="text-uppercase">
            colors:
            <span class="d-inline-block products-color products-color-black mr-2"></span>
            <span class="d-inline-block products-color products-color-blue mr-2"></span>
            <span class="d-inline-block products-color products-color-green mr-2"></span>
          </h5>
          <!-- end of colors -->
          <!-- size -->
          <h5 class="text-uppercase product-size">
            SIZES : XS S M L XL
          </h5>
          <!-- end of size -->
          <!-- cart buttons -->
          <div class="d-flex my-2">
            <span class="btn btn-black mx-1">-</span>
            <span class="btn btn-black mx-1">4</span>
            <span class="btn btn-black mx-1">+</span>
          </div>
          <button class="btn btn-black my-2 mx-2">
            Wishlist
          </button>
          <button class="btn btn-yellow my-2 mx-2">
            Add To Cart
          </button>
          <!-- end of cart buttons -->
        </div>
      </div>
    </div>
  </section>
  <!-- end of single product -->

  <!-- single product info -->
  <section class="single-product-info">
    <div class="container">
      <div class="row">
        <div class="col">
          <div class="jumbotron">
            <!-- products info link -->
            <div class="d-flex justify-content-around my-3">
              <a href="#" class="product-info-link">
                <h4 class="text-capitalize">
                  description
                </h4>
              </a>
              <a href="#" class="product-info-link">
                <h4 class="text-capitalize">
                  additional information
                </h4>
              </a>
              <a href="#" class="product-info-link">
                <h4 class="text-capitalize">
                  Reviews (25)
                </h4>
              </a>
            </div>
            <!-- end of products info link -->
            <p class="lead">
              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestiae voluptatem aperiam culpa, adipisci aspernatur fugiat, animi odio quos assumenda praesentium, doloremque consequuntur vitae repellat eos sapiente laboriosam iusto. Veritatis, enim dolore. Odit, voluptatum doloremque architecto harum at optio quas minima?
            </p>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- end of single product info -->

  <!-- featured section -->
  <section id="featured" class="featured py-5">
    <div class="container">
      <div class="row my-3">
        <div class="col-10 mx-auto text-center">
          <h1 class="text-uppercase">
            featured products
          </h1>
          <p class="text-muted">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur, deleniti?
          </p>
        </div>
      </div>
      <div class="row">
        <!-- single product -->
        <div class="col-10 mx-auto col-md-6 col-lg-4">
          <div class="featured-container p-5">
            <img src="assets/img/img-products/product-1.png" alt="" class="img-fluid">
            <span class="featured-search-icon" data-toggle="modal" data-target="#productModal">
              <i class="fas fa-search"></i>
            </span>
            <a href="#" class="featured-store-link text-capitalize">add to cart</a>
          </div>
          <h6 class="text-capitalize text-center my-2">
            special product
          </h6>
          <h6 class="text-center">
            <span class="text-muted old-price mx-2">$200</span>
            <span>$100</span>
          </h6>
        </div>
        <!-- end of single product -->
        <!-- single product -->
        <div class="col-10 mx-auto col-md-6 col-lg-4">
          <div class="featured-container p-5">
            <img src="assets/img/img-products/product-6.png" alt="" class="img-fluid">
            <span class="featured-search-icon" data-toggle="modal" data-target="#productModal">
              <i class="fas fa-search"></i>
            </span>
            <a href="#" class="featured-store-link text-capitalize">add to cart</a>
          </div>
          <h6 class="text-capitalize text-center my-2">
            special product
          </h6>
          <h6 class="text-center">
            <span class="text-muted old-price mx-2">$200</span>
            <span>$100</span>
          </h6>
        </div>
        <!-- end of single product -->
        <!-- single product -->
        <div class="col-10 mx-auto col-md-6 col-lg-4">
          <div class="featured-container p-5">
            <img src="assets/img/img-products/product-2.png" alt="" class="img-fluid">
            <span class="featured-search-icon" data-toggle="modal" data-target="#productModal">
              <i class="fas fa-search"></i>
            </span>
            <a href="#" class="featured-store-link text-capitalize">add to cart</a>
          </div>
          <h6 class="text-capitalize text-center my-2">
            special product
          </h6>
          <h6 class="text-center">
            <span class="text-muted old-price mx-2">$200</span>
            <span>$100</span>
          </h6>
        </div>
        <!-- end of single product -->
        <!-- single product -->
        <div class="col-10 mx-auto col-md-6 col-lg-4">
          <div class="featured-container p-5">
            <img src="assets/img/img-products/product-3.png" alt="" class="img-fluid">
            <span class="featured-search-icon" data-toggle="modal" data-target="#productModal">
              <i class="fas fa-search"></i>
            </span>
            <a href="#" class="featured-store-link text-capitalize">add to cart</a>
          </div>
          <h6 class="text-capitalize text-center my-2">
            special product
          </h6>
          <h6 class="text-center">
            <span class="text-muted old-price mx-2">$200</span>
            <span>$100</span>
          </h6>
        </div>
        <!-- end of single product -->
        <!-- single product -->
        <div class="col-10 mx-auto col-md-6 col-lg-4">
          <div class="featured-container p-5">
            <img src="assets/img/img-products/product-4.png" alt="" class="img-fluid">
            <span class="featured-search-icon" data-toggle="modal" data-target="#productModal">
              <i class="fas fa-search"></i>
            </span>
            <a href="#" class="featured-store-link text-capitalize">add to cart</a>
          </div>
          <h6 class="text-capitalize text-center my-2">
            special product
          </h6>
          <h6 class="text-center">
            <span class="text-muted old-price mx-2">$200</span>
            <span>$100</span>
          </h6>
        </div>
        <!-- end of single product -->
        <!-- single product -->
        <div class="col-10 mx-auto col-md-6 col-lg-4">
          <div class="featured-container p-5">
            <img src="assets/img/img-products/product-5.png" alt="" class="img-fluid">
            <span class="featured-search-icon" data-toggle="modal" data-target="#productModal">
              <i class="fas fa-search"></i>
            </span>
            <a href="#" class="featured-store-link text-capitalize">add to cart</a>
          </div>
          <h6 class="text-capitalize text-center my-2">
            special product
          </h6>
          <h6 class="text-center">
            <span class="text-muted old-price mx-2">$200</span>
            <span>$100</span>
          </h6>
        </div>
        <!-- end of single product -->
      </div>
    </div>
  </section>
  <!-- end of featured section -->

  <!-- partners -->
  <section class="partners py-5">
    <div class="container">
      <div class="row">
        <!-- compnay carousel -->
        <div class="col-6 col-md-6 col-lg-4 mx-auto">
          <div
            id="partnerCarousel"
            class="carousel slide "
            data-ride="carousel"
          >
            <div class="carousel-inner">
              <!-- single item -->
              <div class="carousel-item active">
                <img
                  src="assets/img/company-logos/company-logo-1.png"
                  class="d-block w-100"
                  alt="partner company"
                />
              </div>
              <!-- end single item -->
              <!-- single item -->
              <div class="carousel-item ">
                <img
                  src="assets/img/company-logos/company-logo-2.png"
                  class="d-block w-100"
                  alt="partner company"
                />
              </div>
              <!-- end single item -->
              <!-- single item -->
              <div class="carousel-item ">
                <img
                  src="assets/img/company-logos/company-logo-3.png"
                  class="d-block w-100"
                  alt="partner company"
                />
              </div>
              <!-- end single item -->
              <!-- single item -->
              <div class="carousel-item ">
                <img
                  src="assets/img/company-logos/company-logo-4.png"
                  class="d-block w-100"
                  alt="partner company"
                />
              </div>
              <!-- end single item -->
              <!-- single item -->
              <div class="carousel-item ">
                <img
                  src="assets/img/company-logos/company-logo-5.png"
                  class="d-block w-100"
                  alt="partner company"
                />
              </div>
              <!-- end single item -->
              <!-- single item -->
              <div class="carousel-item">
                <img
                  src="assets/img/company-logos/company-logo-6.png"
                  class="d-block w-100"
                  alt="partner company"
                />
              </div>
              <!-- end single item -->
            </div>
            <a
              href="#partnerCarousel"
              class="carousel-control-prev"
              role="button"
              data-slide="prev"
            >
              <i class="fas fa-arrow-left"></i>
            </a>
            <a
              href="#partnerCarousel"
              class="carousel-control-next"
              role="button"
              data-slide="next"
            >
              <i class="fas fa-arrow-right"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- end of  partners -->

  <!-- newsletter section -->
  <section id="newsletter" class="newsletter py-5">
    <div class="container">
      <div class="row">
        <div class="col-10 mx-auto text-center">
          <h2 class="text-uppercase">
            newsletter
          </h2>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti blanditiis similique eum, aut culpa maiores cupiditate alias exercitationem error nesciunt.
          </p>
          <form action="">
            <div class="input-group mt-5 mb-4">
              <input type="text" class="text-capitalize form-control" placeholder="enter your email">
              <div class="input-group-append">
              <div class="input-group-text form-icon">
                <i class="fas fa-envelope"></i>
              </div>
              </div>
            </div>
            <button type="submit" class=" btn btn-yellow">subscribe</button>
          </form>
        </div>
      </div>
    </div>
  </section>
  <!-- end of newsletter section -->

  <!-- skills section -->
  <section id="skills" class="skills py-5">
    <div class="container">
      <div class="row">
        <div class="col-10 col-md-6 col-lg-4 mx-auto d-flex my-3">
          <div class="skill-icon mr-3">
            <i class="fas fa-truck"></i>
          </div>
          <div class="skill-text">
            <h3 class="text-uppercase text-white">
              free shipping
            </h3>
            <p class="text-capitalize text-muted">
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odio, obcaecati!
            </p>
          </div>
        </div>
        <div class="col-10 col-md-6 col-lg-4 mx-auto d-flex my-3">
          <div class="skill-icon mr-3">
            <i class="fas fa-comment-dollar"></i>
          </div>
          <div class="skill-text">
            <h3 class="text-uppercase text-white">
              price promise
            </h3>
            <p class="text-capitalize text-muted">
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odio, obcaecati!
            </p>
          </div>
        </div>
        <div class="col-10 col-md-6 col-lg-4 mx-auto d-flex my-3">
          <div class="skill-icon mr-3">
            <i class="fas fa-award"></i>
          </div>
          <div class="skill-text">
            <h3 class="text-uppercase text-white">
              lifetime warranty
            </h3>
            <p class="text-capitalize text-muted">
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odio, obcaecati!
            </p>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- end of skills section -->

10. Now friends we just need to add below code into angulardemo/src/app/store/store.component.html file:

<div class="banner-store d-flex pl-3 pl-lg-5 align-items-center text-center justify-content-center">
    <div>
      <h1 class="text-slanted text-capitalize display-4 text-yellow">
          comfy sloth
      </h1>
      <h1 class="text-capitalize display-4 font-weight-bold">
          our store
      </h1>
    </div>
</div>
<!-- totals -->
<section class="totals py-5">
    <div class="container-fluid">
      <div class="row">
        <div class="col text-uppercase text-center">
          <div class="row">
            <!-- single column -->
          <div class="col-10 mx-auto col-md-2">
            <p class="text-uppercase">
              products
            </p>
          </div>
          <!-- end of single column -->
          <!-- single column -->
          <div class="col-10 mx-auto col-md-4">
            <p class="text-uppercase">
              name of products 
            </p>
          </div>
          <!-- end of single column -->
          <!-- single column -->
          <div class="col-10 mx-auto col-md-2">
            <p class="text-uppercase">
              price
            </p>
          </div>
          <!-- end of single column -->
          <!-- single column -->
          <div class="col-10 mx-auto col-md-2">
            <p class="text-uppercase">
              quantity
            </p>
          </div>
          <!-- end of single column -->
          <!-- single column -->
          <div class="col-10 mx-auto col-md-2">
            <p class="text-uppercase">
              total
            </p>
          </div>
          <!-- end of single column -->
          </div>
          <hr>
          <!-- end of columns -->
          <div class="row my-3 align-items-center">
            <!-- all about product -->
            <div class="col-10 mx-auto col-md-2 my-3">
              <img src="assets/img/img-products/product-1.png" alt="" class="img-fluid">
            </div>
            <div class="col-10 mx-auto col-md-4">
              <p class="text-uppercase">
                comfortable chair
              </p>
            </div>
            <div class="col-10 mx-auto col-md-2">
              <p class="text-uppercase">
                100.00$
              </p>
            </div>
            <div class="col-10 mx-auto col-md-2">
              <div class="d-flex justify-content-center align-items-center">
              <span class="btn btn-black mx-1">-</span>
              <span class="btn btn-black mx-1">4</span>
              <span class="btn btn-black mx-1">+</span>
              </div>
            </div>
            <div class="col-10 mx-auto col-md-2">
              <p class="text-uppercase">
                100.00$
              </p>
            </div>
            <!-- end of all about product -->
            <!-- all about product -->
            <div class="col-10 mx-auto col-md-2 my-3">
              <img src="assets/img/img-products/product-2.png" alt="" class="img-fluid">
            </div>
            <div class="col-10 mx-auto col-md-4">
              <p class="text-uppercase">
                comfortable chair
              </p>
            </div>
            <div class="col-10 mx-auto col-md-2">
              <p class="text-uppercase">
                100.00$
              </p>
            </div>
            <div class="col-10 mx-auto col-md-2">
              <div class="d-flex justify-content-center align-items-center">
              <span class="btn btn-black mx-1">-</span>
              <span class="btn btn-black mx-1">4</span>
              <span class="btn btn-black mx-1">+</span>
              </div>
            </div>
            <div class="col-10 mx-auto col-md-2">
              <p class="text-uppercase">
                100.00$
              </p>
            </div>
            <!-- end of all about product -->
            <!-- all about product -->
            <div class="col-10 mx-auto col-md-2 my-3">
              <img src="assets/img/img-products/product-3.png" alt="" class="img-fluid">
            </div>
            <div class="col-10 mx-auto col-md-4">
              <p class="text-uppercase">
                comfortable chair
              </p>
            </div>
            <div class="col-10 mx-auto col-md-2">
              <p class="text-uppercase">
                100.00$
              </p>
            </div>
            <div class="col-10 mx-auto col-md-2">
              <div class="d-flex justify-content-center align-items-center">
              <span class="btn btn-black mx-1">-</span>
              <span class="btn btn-black mx-1">4</span>
              <span class="btn btn-black mx-1">+</span>
              </div>
            </div>
            <div class="col-10 mx-auto col-md-2">
              <p class="text-uppercase">
                100.00$
              </p>
            </div>
            <!-- end of all about product -->
          </div>
          <!-- buttons -->
          <div class="row my-3">
            <div class="col-sm-6 mx-auto col d-flex justify-content-center flex-wrap">
              <button type="button" class="btn btn-black my-2">Continue shipping</button>
              <button type="button" class="btn btn-yellow ml-2 my-2">checkout</button>
            </div>
          </div>
          <!-- cart total -->
          <div class="row">
            <div class="col mx-auto col-sm-8 col-md-6 col-lg-4 my-3">
              <div class="card card-body bg-secondary text-uppercase">
                <div class="card-title text-white">
                  <h6>cart total</h6>
                </div>
                <div class="row">
                  <!-- single row -->
                  <div class="col-6">
                    SUB TOTOAL
                  </div>
                  <div class="col-6">
                    $900.00
                  </div>
                  <!-- end of single row -->
                  <!-- single row -->
                  <div class="col-6">
                    TAX
                  </div>
                  <div class="col-6">
                    $123.00
                  </div>
                  <!-- end of single row -->
                  <!-- single row -->
                  <div class="col-6">
                    SHIPPING
                  </div>
                  <div class="col-6">
                    $90.00
                  </div>
                  <!-- end of single row -->
                  <!-- single row -->
                  <div class="col-6 my-2">
                    ORDER TOTAL
                  </div>
                  <div class="col-6 text-danger my-2">
                    $1000.00
                  </div>
                  <!-- end of single row -->
                </div>
              </div>
            </div>
          </div>
          <!-- end of cart total -->
          <!-- end of buttons -->
        </div>
      </div>
    </div>
  </section>
  <!-- end of totals -->

  <!-- featured section -->
  <section id="featured" class="featured py-5">
    <div class="container">
      <div class="row my-3">
        <div class="col-10 mx-auto text-center">
          <h1 class="text-uppercase">
            featured products
          </h1>
          <p class="text-muted">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur, deleniti?
          </p>
        </div>
      </div>
      <div class="row">
        <!-- single product -->
        <div class="col-10 mx-auto col-md-6 col-lg-4">
          <div class="featured-container p-5">
            <img src="assets/img/img-products/product-1.png" alt="" class="img-fluid">
            <span class="featured-search-icon" data-toggle="modal" data-target="#productModal">
              <i class="fas fa-search"></i>
            </span>
            <a href="#" class="featured-store-link text-capitalize">add to cart</a>
          </div>
          <h6 class="text-capitalize text-center my-2">
            special product
          </h6>
          <h6 class="text-center">
            <span class="text-muted old-price mx-2">$200</span>
            <span>$100</span>
          </h6>
        </div>
        <!-- end of single product -->
        <!-- single product -->
        <div class="col-10 mx-auto col-md-6 col-lg-4">
          <div class="featured-container p-5">
            <img src="assets/img/img-products/product-6.png" alt="" class="img-fluid">
            <span class="featured-search-icon" data-toggle="modal" data-target="#productModal">
              <i class="fas fa-search"></i>
            </span>
            <a href="#" class="featured-store-link text-capitalize">add to cart</a>
          </div>
          <h6 class="text-capitalize text-center my-2">
            special product
          </h6>
          <h6 class="text-center">
            <span class="text-muted old-price mx-2">$200</span>
            <span>$100</span>
          </h6>
        </div>
        <!-- end of single product -->
        <!-- single product -->
        <div class="col-10 mx-auto col-md-6 col-lg-4">
          <div class="featured-container p-5">
            <img src="assets/img/img-products/product-2.png" alt="" class="img-fluid">
            <span class="featured-search-icon" data-toggle="modal" data-target="#productModal">
              <i class="fas fa-search"></i>
            </span>
            <a href="#" class="featured-store-link text-capitalize">add to cart</a>
          </div>
          <h6 class="text-capitalize text-center my-2">
            special product
          </h6>
          <h6 class="text-center">
            <span class="text-muted old-price mx-2">$200</span>
            <span>$100</span>
          </h6>
        </div>
        <!-- end of single product -->
        <!-- single product -->
        <div class="col-10 mx-auto col-md-6 col-lg-4">
          <div class="featured-container p-5">
            <img src="assets/img/img-products/product-3.png" alt="" class="img-fluid">
            <span class="featured-search-icon" data-toggle="modal" data-target="#productModal">
              <i class="fas fa-search"></i>
            </span>
            <a href="#" class="featured-store-link text-capitalize">add to cart</a>
          </div>
          <h6 class="text-capitalize text-center my-2">
            special product
          </h6>
          <h6 class="text-center">
            <span class="text-muted old-price mx-2">$200</span>
            <span>$100</span>
          </h6>
        </div>
        <!-- end of single product -->
        <!-- single product -->
        <div class="col-10 mx-auto col-md-6 col-lg-4">
          <div class="featured-container p-5">
            <img src="assets/img/img-products/product-4.png" alt="" class="img-fluid">
            <span class="featured-search-icon" data-toggle="modal" data-target="#productModal">
              <i class="fas fa-search"></i>
            </span>
            <a href="#" class="featured-store-link text-capitalize">add to cart</a>
          </div>
          <h6 class="text-capitalize text-center my-2">
            special product
          </h6>
          <h6 class="text-center">
            <span class="text-muted old-price mx-2">$200</span>
            <span>$100</span>
          </h6>
        </div>
        <!-- end of single product -->
        <!-- single product -->
        <div class="col-10 mx-auto col-md-6 col-lg-4">
          <div class="featured-container p-5">
            <img src="assets/img/img-products/product-5.png" alt="" class="img-fluid">
            <span class="featured-search-icon" data-toggle="modal" data-target="#productModal">
              <i class="fas fa-search"></i>
            </span>
            <a href="#" class="featured-store-link text-capitalize">add to cart</a>
          </div>
          <h6 class="text-capitalize text-center my-2">
            special product
          </h6>
          <h6 class="text-center">
            <span class="text-muted old-price mx-2">$200</span>
            <span>$100</span>
          </h6>
        </div>
        <!-- end of single product -->
      </div>
    </div>
  </section>
  <!-- end of featured section -->

  <!-- partners -->
  <section class="partners py-5">
    <div class="container">
      <div class="row">
        <!-- compnay carousel -->
        <div class="col-6 col-md-6 col-lg-4 mx-auto">
          <div
            id="partnerCarousel"
            class="carousel slide "
            data-ride="carousel"
          >
            <div class="carousel-inner">
              <!-- single item -->
              <div class="carousel-item active">
                <img
                  src="assets/img/company-logos/company-logo-1.png"
                  class="d-block w-100"
                  alt="partner company"
                />
              </div>
              <!-- end single item -->
              <!-- single item -->
              <div class="carousel-item ">
                <img
                  src="assets/img/company-logos/company-logo-2.png"
                  class="d-block w-100"
                  alt="partner company"
                />
              </div>
              <!-- end single item -->
              <!-- single item -->
              <div class="carousel-item ">
                <img
                  src="assets/img/company-logos/company-logo-3.png"
                  class="d-block w-100"
                  alt="partner company"
                />
              </div>
              <!-- end single item -->
              <!-- single item -->
              <div class="carousel-item ">
                <img
                  src="assets/img/company-logos/company-logo-4.png"
                  class="d-block w-100"
                  alt="partner company"
                />
              </div>
              <!-- end single item -->
              <!-- single item -->
              <div class="carousel-item ">
                <img
                  src="assets/img/company-logos/company-logo-5.png"
                  class="d-block w-100"
                  alt="partner company"
                />
              </div>
              <!-- end single item -->
              <!-- single item -->
              <div class="carousel-item">
                <img
                  src="assets/img/company-logos/company-logo-6.png"
                  class="d-block w-100"
                  alt="partner company"
                />
              </div>
              <!-- end single item -->
            </div>
            <a
              href="#partnerCarousel"
              class="carousel-control-prev"
              role="button"
              data-slide="prev"
            >
              <i class="fas fa-arrow-left"></i>
            </a>
            <a
              href="#partnerCarousel"
              class="carousel-control-next"
              role="button"
              data-slide="next"
            >
              <i class="fas fa-arrow-right"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- end of  partners -->

  <!-- newsletter section -->
  <section id="newsletter" class="newsletter py-5">
    <div class="container">
      <div class="row">
        <div class="col-10 mx-auto text-center">
          <h2 class="text-uppercase">
            newsletter
          </h2>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti blanditiis similique eum, aut culpa maiores cupiditate alias exercitationem error nesciunt.
          </p>
          <form action="">
            <div class="input-group mt-5 mb-4">
              <input type="text" class="text-capitalize form-control" placeholder="enter your email">
              <div class="input-group-append">
              <div class="input-group-text form-icon">
                <i class="fas fa-envelope"></i>
              </div>
              </div>
            </div>
            <button type="submit" class=" btn btn-yellow">subscribe</button>
          </form>
        </div>
      </div>
    </div>
  </section>
  <!-- end of newsletter section -->

  <!-- skills section -->
  <section id="skills" class="skills py-5">
    <div class="container">
      <div class="row">
        <div class="col-10 col-md-6 col-lg-4 mx-auto d-flex my-3">
          <div class="skill-icon mr-3">
            <i class="fas fa-truck"></i>
          </div>
          <div class="skill-text">
            <h3 class="text-uppercase text-white">
              free shipping
            </h3>
            <p class="text-capitalize text-muted">
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odio, obcaecati!
            </p>
          </div>
        </div>
        <div class="col-10 col-md-6 col-lg-4 mx-auto d-flex my-3">
          <div class="skill-icon mr-3">
            <i class="fas fa-comment-dollar"></i>
          </div>
          <div class="skill-text">
            <h3 class="text-uppercase text-white">
              price promise
            </h3>
            <p class="text-capitalize text-muted">
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odio, obcaecati!
            </p>
          </div>
        </div>
        <div class="col-10 col-md-6 col-lg-4 mx-auto d-flex my-3">
          <div class="skill-icon mr-3">
            <i class="fas fa-award"></i>
          </div>
          <div class="skill-text">
            <h3 class="text-uppercase text-white">
              lifetime warranty
            </h3>
            <p class="text-capitalize text-muted">
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odio, obcaecati!
            </p>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- end of skills section -->

11. Now friends we just need to add below code into angulardemo/src/app/app-routing.module.ts file:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ProductsComponent } from './products/products.component';
import { SingleproductComponent } from './singleproduct/singleproduct.component';
import { StoreComponent } from './store/store.component';
const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'products', component: ProductsComponent },
  { path: 'singleproduct', component: SingleproductComponent },
  { path: 'store', component: StoreComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Friends in the end must run ng serve command into your terminal to run the angular 17 ecommerce project (localhost:4200).

Guys click here to check the Angular 17 Bootstrap 5 Free Templates.

Now we are done friends. If you have any kind of query, suggestion and new requirement then feel free to comment below.

Note: Friends, In this post, I just tell the basic setup and things, you can change the code according to your requirements.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad because with your views, I will make my next posts more good and helpful.

Jassa

Thanks

September 28, 2023

Angular 16 Transportation Website Template Free

Hello friends, welcome back to my blog. Today this blog post I will tell you, Angular 16 Transportation Website Template Free.

Live Demo

Angular 16 came and if you are new then you must check below two links:

Friends now I proceed onwards and here is the working code snippet and please use carefully this to avoid the mistakes:

1. Firstly friends we need fresh angular 16 setup and for this we need to run below commands but if you already have angular 16 setup then you can avoid below commands. Secondly we should also have latest node version installed on our system:

npm install -g @angular/cli 

ng new angulardemo //Create new Angular Project 

cd angulardemo // Go inside the Angular Project Folder
 
ng add @ionic/angular

ng serve

2. Now friends, please download images and styles from this git repo link and please put all the images css files folders in “src/assets/” folder after creating css an images folders inside it:

Angular Portfolio project git repo

3. Now friends we just need to add below code into angulardemo/src/app/app.component.html file to get final out on the web browser:

<!-- 
   - #HEADER
 -->

 <header class="header" data-header>
   <div class="container">

     <h1>
       <a href="#" class="logo">Transportio</a>
     </h1>

     <nav class="navbar" data-navbar>

       <div class="navbar-top">
         <a href="#" class="logo">Transportio</a>

         <button class="nav-close-btn" aria-label="Clsoe menu" data-nav-toggler>
           <ion-icon name="close-outline"></ion-icon>
         </button>
       </div>

       <ul class="navbar-list">

         <li class="navbar-item">
           <a href="#home" class="navbar-link" data-nav-link>
             <span>Home</span>

             <ion-icon name="chevron-forward"></ion-icon>
           </a>
         </li>

         <li class="navbar-item">
           <a href="#about" class="navbar-link" data-nav-link>
             <span>About</span>

             <ion-icon name="chevron-forward"></ion-icon>
           </a>
         </li>

         <li class="navbar-item">
           <a href="#service" class="navbar-link" data-nav-link>
             <span>Service</span>

             <ion-icon name="chevron-forward"></ion-icon>
           </a>
         </li>

         <li class="navbar-item">
           <a href="#blog" class="navbar-link" data-nav-link>
             <span>Blog</span>

             <ion-icon name="chevron-forward"></ion-icon>
           </a>
         </li>

         <li class="navbar-item">
           <a href="#" class="navbar-link" data-nav-link>
             <span>Contact</span>

             <ion-icon name="chevron-forward"></ion-icon>
           </a>
         </li>

       </ul>

     </nav>

     <div class="header-contact">

       <div>
         <p class="contact-label">Free Call In U.S.A</p>

         <a href="tel:12345678910" class="contact-number">1 234 567 8910</a>
       </div>

       <div class="contact-icon">
         <ion-icon name="call-outline"></ion-icon>
       </div>

     </div>

     <button class="nav-open-btn" aria-label="Open menu" data-nav-toggler>
       <ion-icon name="menu-outline"></ion-icon>
     </button>

     <div class="overlay" data-nav-toggler data-overlay></div>

   </div>
 </header>





 <main>
   <article>

     <!-- 
       - #HERO
     -->

     <section class="section hero" aria-label="home" id="home"
       style="background-image: url('assets/images/hero-banner.jpg')">
       <div class="container">

         <div class="hero-content">

           <h2 class="h1 hero-title">
             <span class="span">To Every</span> Direction
           </h2>

           <p class="hero-text">
             There are many variations of passages of worem Ipsum available, but the majority
           </p>

           <a href="#" class="btn-outline">View Services</a>

           <img src="assets/images/hero-shape.png" width="116" height="116" loading="lazy"
             class="hero-shape shape-1">

           <img src="assets/images/hero-shape.png" width="116" height="116" loading="lazy"
             class="hero-shape shape-2">

         </div>

       </div>
     </section>





     <!-- 
       - #ABOUT
     -->

     <section class="section about" id="about" aria-label="about">
       <div class="container">

         <figure class="about-banner img-holder" style="--width: 400; --height: 720;">
           <img src="assets/images/about-banner.jpg" width="400" height="720" loading="lazy" alt=""
             class="img-cover">

           <img src="assets/images/about-shape-1.png" width="260" height="170" loading="lazy" alt=""
             class="abs-img abs-img-1">

           <img src="assets/images/about-shape-2.png" width="500" height="500" loading="lazy" alt=""
             class="abs-img abs-img-2">
         </figure>

         <div class="about-content">

           <p class="section-subtitle">Why Choose Us</p>

           <h2 class="h2 section-title">We Are Professional Logistics & cargo Agency</h2>

           <p class="section-text">
             Sed ut perspiciatis unde omnis iste natus error volup tatem accusantium dolorem que laudantium, totam
             inventore.
           </p>

           <ul class="about-list">

             <li class="about-item">
               <div class="about-icon">
                 <ion-icon name="chevron-forward"></ion-icon>
               </div>

               <p class="about-text">
                 Go beyond logistics, make the world go round and revolutionize business.
               </p>
             </li>

             <li class="about-item">
               <div class="about-icon">
                 <ion-icon name="chevron-forward"></ion-icon>
               </div>

               <p class="about-text">
                 Logistics through innovation, dedication, and technology. ready, set, done.
               </p>
             </li>

             <li class="about-item">
               <div class="about-icon">
                 <ion-icon name="chevron-forward"></ion-icon>
               </div>

               <p class="about-text">
                 We take pride in serving our customers safely. together with passion.
               </p>
             </li>

             <li class="about-item">
               <div class="about-icon">
                 <ion-icon name="chevron-forward"></ion-icon>
               </div>

               <p class="about-text">
                 Imagination what we can easily see is only a small percentage.
               </p>
             </li>

             <li class="about-item">
               <div class="about-icon">
                 <ion-icon name="chevron-forward"></ion-icon>
               </div>

               <p class="about-text">
                 Quality never goes out of style. safety, quality, professionalism.
               </p>
             </li>

             <li class="about-item">
               <div class="about-icon">
                 <ion-icon name="chevron-forward"></ion-icon>
               </div>

               <p class="about-text">
                 The quality shows in every move we make where business lives.
               </p>
             </li>

           </ul>

           <a href="#" class="btn">Learn More</a>

         </div>

       </div>
     </section>





     <!-- 
       - #SERVICE
     -->

     <section class="section service" id="service" aria-label="service">
       <div class="container">

         <p class="section-subtitle">All Services</p>

         <h2 class="h2 section-title">Trusted For Our Services</h2>

         <p class="section-text">
           Lorem Ipsum is simply dummy text of the printing and typesetting industry the standard dummy text ever since
           the when an
           printer took.
         </p>

         <ul class="service-list grid-list">

           <li>
             <div class="service-card">

               <div class="card-icon">
                 <img src="assets/images/service-icon-1.png" width="80" height="60" loading="lazy" alt="Truck">
               </div>

               <h3 class="h3 card-title">
                 <span class="span">01</span> Air Freight
               </h3>

               <p class="card-text">
                 Our aim is to optimize and improve your supply chain so that we can give you the best service.
               </p>

               <a href="#" class="btn-link">
                 <ion-icon name="chevron-forward" aria-hidden="true"></ion-icon>

                 <span class="span">View Detail</span>
               </a>

             </div>
           </li>

           <li>
             <div class="service-card">

               <div class="card-icon">
                 <img src="assets/images/service-icon-2.png" width="74" height="60" loading="lazy" alt="Ship">
               </div>

               <h3 class="h3 card-title">
                 <span class="span">02</span> Road Freight
               </h3>

               <p class="card-text">
                 Our aim is to optimize and improve your supply chain so that we can give you the best service.
               </p>

               <a href="#" class="btn-link">
                 <ion-icon name="chevron-forward" aria-hidden="true"></ion-icon>

                 <span class="span">View Detail</span>
               </a>

             </div>
           </li>

           <li>
             <div class="service-card">

               <div class="card-icon">
                 <img src="assets/images/service-icon-3.png" width="60" height="60" loading="lazy" alt="Airplane">
               </div>

               <h3 class="h3 card-title">
                 <span class="span">03</span> Ocean Freight
               </h3>

               <p class="card-text">
                 Our aim is to optimize and improve your supply chain so that we can give you the best service.
               </p>

               <a href="#" class="btn-link">
                 <ion-icon name="chevron-forward" aria-hidden="true"></ion-icon>

                 <span class="span">View Detail</span>
               </a>

             </div>
           </li>

           <li>
             <div class="service-card">

               <div class="card-icon">
                 <img src="assets/images/service-icon-4.png" width="50" height="60" loading="lazy" alt="Train">
               </div>

               <h3 class="h3 card-title">
                 <span class="span">04</span> Rail Freight
               </h3>

               <p class="card-text">
                 Our aim is to optimize and improve your supply chain so that we can give you the best service.
               </p>

               <a href="#" class="btn-link">
                 <ion-icon name="chevron-forward" aria-hidden="true"></ion-icon>

                 <span class="span">View Detail</span>
               </a>

             </div>
           </li>

           <li>
             <div class="service-card">

               <div class="card-icon">
                 <img src="assets/images/service-icon-5.png" width="63" height="60" loading="lazy" alt="Trolley">
               </div>

               <h3 class="h3 card-title">
                 <span class="span">05</span> Warehousing
               </h3>

               <p class="card-text">
                 Our aim is to optimize and improve your supply chain so that we can give you the best service.
               </p>

               <a href="#" class="btn-link">
                 <ion-icon name="chevron-forward" aria-hidden="true"></ion-icon>

                 <span class="span">View Detail</span>
               </a>

             </div>
           </li>

           <li>
             <div class="service-card">

               <div class="card-icon">
                 <img src="assets/images/service-icon-6.png" width="46" height="60" loading="lazy" alt="Paper">
               </div>

               <h3 class="h3 card-title">
                 <span class="span">06</span> Project Cargo
               </h3>

               <p class="card-text">
                 Our aim is to optimize and improve your supply chain so that we can give you the best service.
               </p>

               <a href="#" class="btn-link">
                 <ion-icon name="chevron-forward" aria-hidden="true"></ion-icon>

                 <span class="span">View Detail</span>
               </a>

             </div>
           </li>

         </ul>

       </div>
     </section>





     <!-- 
       - #FEATURE
     -->

     <section class="section feature" aria-label="feature">
       <div class="container">

         <div class="title-wrapper">

           <div>
             <p class="section-subtitle">Estimation</p>

             <h2 class="h2 section-title">Has a wide range of solutions</h2>

             <p class="section-text">
               Lorem Ipsum is simply dummy text of the printing and typesetting industry the standard dummy text ever
               since the when an
               printer took.
             </p>
           </div>

           <a href="#" class="btn">Read More</a>

         </div>

         <ul class="feature-list grid-list">

           <li>
             <div class="feature-card" style="--card-number: '01'">

               <div class="card-icon">
                 <img src="assets/images/feature-icon-1.png" width="72" height="91" alt="">
               </div>

               <h3 class="h3 card-title">Solutions and specialized</h3>

               <p class="card-text">
                 Our aim is to optimize and improve your supply chain so that we can give you the best service
               </p>

               <a href="#" class="card-btn" aria-label="Read more">
                 <ion-icon name="arrow-forward"></ion-icon>
               </a>

             </div>
           </li>

           <li>
             <div class="feature-card" style="--card-number: '02'">

               <div class="card-icon">
                 <img src="assets/images/feature-icon-2.png" width="94" height="94" alt="">
               </div>

               <h3 class="h3 card-title">Multiple warehouses</h3>

               <p class="card-text">
                 We provide multiple drop off and pickup locations so you don't have to worry. And you should not face
                 any kind...
               </p>

               <a href="#" class="card-btn" aria-label="Read more">
                 <ion-icon name="arrow-forward"></ion-icon>
               </a>

             </div>
           </li>

           <li>
             <div class="feature-card" style="--card-number: '03'">

               <div class="card-icon">
                 <img src="assets/images/feature-icon-3.png" width="93" height="93" alt="">
               </div>

               <h3 class="h3 card-title">Tracking made easy</h3>

               <p class="card-text">
                 A tracking number for the entire process. so that you can find the exact position. this process will
                 help you
               </p>

               <a href="#" class="card-btn" aria-label="Read more">
                 <ion-icon name="arrow-forward"></ion-icon>
               </a>

             </div>
           </li>

         </ul>

       </div>
     </section>





     <!-- 
       - #PROJECT
     -->

     <section class="section project" aria-label="project">
       <div class="container">

         <p class="section-subtitle">Projects</p>

         <h2 class="h2 section-title">Featured Projects</h2>

         <p class="section-text">
           Lorem Ipsum is simply dummy text of the printing and typesetting industry the standard dummy text ever since
           the when an
           printer took.
         </p>

         <ul class="project-list">

           <li class="project-item">
             <div class="project-card">

               <figure class="card-banner img-holder" style="--width: 397; --height: 352;">
                 <img src="assets/images/project-1.jpg" width="397" height="352" loading="lazy"
                   alt="Warehouse inventory" class="img-cover">
               </figure>

               <button class="action-btn" aria-label="View image">
                 <ion-icon name="expand-outline"></ion-icon>
               </button>

               <div class="card-content">
                 <p class="card-tag">Warehousing , Distrbution</p>

                 <h3 class="h3">
                   <a href="#" class="card-title">Warehouse inventory</a>
                 </h3>

                 <a href="#" class="card-link">Read More</a>
               </div>

             </div>
           </li>

           <li class="project-item">
             <div class="project-card">

               <figure class="card-banner img-holder" style="--width: 397; --height: 352;">
                 <img src="assets/images/project-2.jpg" width="397" height="352" loading="lazy"
                   alt="Warehouse inventory" class="img-cover">
               </figure>

               <button class="action-btn" aria-label="View image">
                 <ion-icon name="expand-outline"></ion-icon>
               </button>

               <div class="card-content">
                 <p class="card-tag">Logistics, Analytics</p>

                 <h3 class="h3">
                   <a href="#" class="card-title">Minimize Manufacturing</a>
                 </h3>

                 <a href="#" class="card-link">Read More</a>
               </div>

             </div>
           </li>

           <li class="project-item">
             <div class="project-card">

               <figure class="card-banner img-holder" style="--width: 397; --height: 352;">
                 <img src="assets/images/project-3.jpg" width="397" height="352" loading="lazy"
                   alt="Warehouse inventory" class="img-cover">
               </figure>

               <button class="action-btn" aria-label="View image">
                 <ion-icon name="expand-outline"></ion-icon>
               </button>

               <div class="card-content">
                 <p class="card-tag">Warehousing , Distrbution</p>

                 <h3 class="h3">
                   <a href="#" class="card-title">Warehouse inventory</a>
                 </h3>

                 <a href="#" class="card-link">Read More</a>
               </div>

             </div>
           </li>

           <li class="project-item">
             <div class="project-card">

               <figure class="card-banner img-holder" style="--width: 397; --height: 352;">
                 <img src="assets/images/project-4.jpg" width="397" height="352" loading="lazy"
                   alt="Warehouse inventory" class="img-cover">
               </figure>

               <button class="action-btn" aria-label="View image">
                 <ion-icon name="expand-outline"></ion-icon>
               </button>

               <div class="card-content">
                 <p class="card-tag">Logistics, Analytics</p>

                 <h3 class="h3">
                   <a href="#" class="card-title">Minimize Manufacturing</a>
                 </h3>

                 <a href="#" class="card-link">Read More</a>
               </div>

             </div>
           </li>

           <li class="project-item">
             <div class="project-card">

               <figure class="card-banner img-holder" style="--width: 397; --height: 352;">
                 <img src="assets/images/project-5.jpg" width="397" height="352" loading="lazy"
                   alt="Warehouse inventory" class="img-cover">
               </figure>

               <button class="action-btn" aria-label="View image">
                 <ion-icon name="expand-outline"></ion-icon>
               </button>

               <div class="card-content">
                 <p class="card-tag">Warehousing , Distrbution</p>

                 <h3 class="h3">
                   <a href="#" class="card-title">Warehouse inventory</a>
                 </h3>

                 <a href="#" class="card-link">Read More</a>
               </div>

             </div>
           </li>

           <li class="project-item">
             <div class="project-card">

               <figure class="card-banner img-holder" style="--width: 397; --height: 352;">
                 <img src="assets/images/project-6.jpg" width="397" height="352" loading="lazy"
                   alt="Warehouse inventory" class="img-cover">
               </figure>

               <button class="action-btn" aria-label="View image">
                 <ion-icon name="expand-outline"></ion-icon>
               </button>

               <div class="card-content">
                 <p class="card-tag">Logistics, Analytics</p>

                 <h3 class="h3">
                   <a href="#" class="card-title">Minimize Manufacturing</a>
                 </h3>

                 <a href="#" class="card-link">Read More</a>
               </div>

             </div>
           </li>

         </ul>

       </div>
     </section>





     <!-- 
       - #BLOG
     -->

     <section class="section blog" aria-label="blog" id="blog">
       <div class="container">

         <p class="section-subtitle">Our Blogs</p>

         <h2 class="h2 section-title">Recent news & events</h2>

         <p class="section-text">
           Lorem Ipsum is simply dummy text of the printing and typesetting industry the standard dummy text ever since
           the when an
           printer took.
         </p>

         <ul class="blog-list grid-list">

           <li>
             <div class="blog-card">

               <figure class="card-banner img-holder" style="--width: 770; --height: 500;">
                 <img src="assets/images/blog-1.jpg" width="770" height="500" loading="lazy"
                   alt="At the end of the day, going forward, a new normal that has evolved from. your only logistic partner."
                   class="img-cover">
               </figure>

               <div class="card-content">

                 <time class="card-meta" datetime="2022-08-02">
                   <span class="span">02</span> Aug
                 </time>

                 <h3 class="h3 card-title">
                   <a href="#">
                     At the end of the day, going forward, a new normal that has evolved from. your only logistic
                     partner.
                   </a>
                 </h3>

                 <p class="card-text">
                   New chip traps clusters of migrating tumor cells asperiortenetur, blanditiis odit. typesetting
                   industry the standard
                   dummy text ever since the when an printer.
                 </p>

                 <a href="#" class="btn-link">
                   <ion-icon name="chevron-forward" aria-hidden="true"></ion-icon>

                   <span class="span">Read More</span>
                 </a>

               </div>

             </div>
           </li>

           <li>
             <div class="blog-card">

               <figure class="card-banner img-holder" style="--width: 770; --height: 500;">
                 <img src="assets/images/blog-2.jpg" width="770" height="500" loading="lazy"
                   alt="Going forward, a new normal that has evolved from generation. moving your products across all borders."
                   class="img-cover">
               </figure>

               <div class="card-content">

                 <time class="card-meta" datetime="2022-08-21">
                   <span class="span">21</span> Aug
                 </time>

                 <h3 class="h3 card-title">
                   <a href="#">
                     Going forward, a new normal that has evolved from generation. moving your products across all
                     borders.
                   </a>
                 </h3>

                 <p class="card-text">
                   New chip traps clusters of migrating tumor cells asperiortenetur, blanditiis odit. typesetting
                   industry the standard
                   dummy text ever since the when an printer.
                 </p>

                 <a href="#" class="btn-link">
                   <ion-icon name="chevron-forward" aria-hidden="true"></ion-icon>

                   <span class="span">Read More</span>
                 </a>

               </div>

             </div>
           </li>

         </ul>

       </div>
     </section>





     <!-- 
       - #NEWSLETTER
     -->

     <section class="section newsletter" aria-label="newsletter">
       <div class="container">

         <figure class="newsletter-banner img-holder">
           <img src="assets/images/newsletter-banner.png" width="303" height="381" alt="newsletter banner"
             class="w-100">
         </figure>

         <div class="newsletter-content">

           <h2 class="h2 section-title">Subscribe for offers and news</h2>

           <form action="" class="newsletter-form">
             <input type="email" name="email_address" placeholder="Enter Your Email" aria-label="email"
               class="email-field">

             <button type="submit" class="newsletter-btn">Subscribe Now</button>
           </form>

         </div>

       </div>
     </section>

   </article>
 </main>





 <!-- 
   - #FOOTER
 -->

 <footer class="footer">
   <div class="container">

     <div class="footer-top section">

       <div class="footer-brand">

         <a href="#" class="logo">Transportio</a>

         <p class="footer-text">
           Many desktop publishing packages and web page editors now use are dolra Ipsum as their default.
         </p>

         <ul class="social-list">

           <li>
             <a href="#" class="social-link">
               <ion-icon name="logo-facebook"></ion-icon>
             </a>
           </li>

           <li>
             <a href="#" class="social-link">
               <ion-icon name="logo-twitter"></ion-icon>
             </a>
           </li>

           <li>
             <a href="#" class="social-link">
               <ion-icon name="logo-instagram"></ion-icon>
             </a>
           </li>

           <li>
             <a href="#" class="social-link">
               <ion-icon name="logo-youtube"></ion-icon>
             </a>
           </li>

         </ul>

       </div>

       <ul class="footer-list">

         <li>
           <p class="footer-list-title">Quick Links</p>
         </li>

         <li>
           <a href="#" class="footer-link">About</a>
         </li>

         <li>
           <a href="#" class="footer-link">Services</a>
         </li>

         <li>
           <a href="#" class="footer-link">Blog</a>
         </li>

         <li>
           <a href="#" class="footer-link">FAQ</a>
         </li>

         <li>
           <a href="#" class="footer-link">Contact Us</a>
         </li>

       </ul>

       <ul class="footer-list">

         <li>
           <p class="footer-list-title">Services</p>
         </li>

         <li>
           <a href="#" class="footer-link">Warehouse</a>
         </li>

         <li>
           <a href="#" class="footer-link">Air Freight</a>
         </li>

         <li>
           <a href="#" class="footer-link">Ocean Freight</a>
         </li>

         <li>
           <a href="#" class="footer-link">Road Freight</a>
         </li>

         <li>
           <a href="#" class="footer-link">Packaging</a>
         </li>

       </ul>

       <ul class="footer-list">

         <li>
           <p class="footer-list-title">Community</p>
         </li>

         <li>
           <a href="#" class="footer-link">Business Consulting</a>
         </li>

         <li>
           <a href="#" class="footer-link">Testimonials</a>
         </li>

         <li>
           <a href="#" class="footer-link">Track Your Shipment</a>
         </li>

         <li>
           <a href="#" class="footer-link">Privacy Policy</a>
         </li>

         <li>
           <a href="#" class="footer-link">Terms & Condition</a>
         </li>

       </ul>

     </div>

     <div class="footer-bottom">
       <p class="copyright">
         &copy; 2023. All Rights Reserved by <a href="#" class="copyright-link">Jassa</a>
       </p>
     </div>

   </div>
 </footer>





 <!-- 
   - #BACK TO TOP
 -->

 <a href="#top" class="back-top-btn" aria-label="Back to top" data-back-top-btn>
   <ion-icon name="chevron-up"></ion-icon>
 </a>

4. Now guys please add the below code inside angulardemo/src/index.html file to styles and scripts:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angular | Ecommerce Template</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
   
 <!-- 
    - custom css link
  -->
  <link rel="stylesheet" href="assets/css/style.css">

  <!--
    - google font link
  -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;600;700&family=Rubik:wght@400;500;600;700&display=swap"
    rel="stylesheet">
</head>
<body id="top">
  <app-root></app-root>
  <!-- 
    - custom js link
  -->
  <script src="assets/js/script.js" defer></script>

  <!-- 
    - ionicon link
  -->
  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

</body>
</html>

Friends in the end must run ng serve command into your terminal to run the angular 16 project (localhost:4200).

Guys click here to check the Angular 16 Bootstrap 5 Free Templates.

Now we are done friends. If you have any kind of query, suggestion and new requirement then feel free to comment below.

Note: Friends, In this post, I just tell the basic setup and things, you can change the code according to your requirements.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad because with your views, I will make my next posts more good and helpful.

Jassa

Thanks

September 21, 2023

Create Beautiful Gym Website with Angular

Hello friends, welcome back to my blog. Today this blog post will tell you Create Beautiful Gym Website with Angular.

Live Demo

Angular 16 and Bootstrap 5 came and if you are new then you must check below two links:

Friends now I proceed onwards and here is the working code snippet and please use carefully this to avoid the mistakes:

1. Firstly friends we need fresh angular 16 setup and for this we need to run below commands but if you already have angular 16 setup then you can avoid below commands. Secondly we should also have latest node version installed on our system:

npm install -g @angular/cli 

ng new angulardemo//Create new Angular Project 

cd angulardemo // Go inside the Angular Project Folder

2. Now friends we just need to add below code into angulardemo/src/app/app.component.html file to get final out on the web browser:

<main>

  <!-- HEADER -->


  <header class="primary-header">
      <div class="container">
          <div class="nav-wrapper">
              <a class="logo">
                  <i class="fa-solid fa-dumbbell"></i>Fitneed</a>
                  <button class="mobile-nav-toggle" aria-controls="primary-navigation" aria-expanded="false">
                      <span class="fa-solid fa-bars" aria-hidden="true"></span>
                      <span class="visually-hidden">Menu</span>
                    </button>
              <nav class="primary-navigation" id="primary-navigation">
                  <ul aria-label="Primary" role="list" class="nav-list">
                      <li><a href="/">Home</a></li>
                      <li><a href="#programs-section">Programs</a></li>
                      <li><a href="#products-section">Products</a></li>
                      <li><a href="#pricing-section">Pricing</a></li>
                  </ul>
              </nav>
              <button class="btn | display-sm-none display-md-inline-flex">Get Started</button>
          </div>
      </div>
  </header>


  <!-- HERO-SECTION -->


  <section class="hero-section | padding-block-900">
      <div class="container">
          <div class="flow | text-center-sm-only">
              <h1 class="fs-primary-heading fw-bold uppercase"><span class="special-text"> Fitness</span> is your
                  passion <span class="special-text">with</span> aggression</h1>
              <p>It is a long established fact that a reader will be distracted by the readable content of a page
                  when looking at its layout. It is a long established fact that a reader will be distracted by
                  the readable content of a page when looking at its layout.</p>
              <button class="btn">Get Started</button>
          </div>
      </div>
  </section>
</main>


<!-- INTRODUCTION-SECTION -->
<section class="introduction | padding-block-900 bg-secondary">
  <div class="container">
          <div class="flow introduction-content | text-center-sm-only">
              <h2 class="fs-secondary-heading fw-bold uppercase">Welcome to <span class="special-text">Fitneed</span></h2>
              <p data-width="wide" class="fs-500">It is a long established fact that a reader will be distracted
                  by the readable content of a page when looking at its layout.It is a long established fact that
                  a reader will be distracted by the readable content of a page when looking at its layout.It is a
                  long established fact that a reader will be distracted by the readable content of a page when
                  looking at its layout. It is a long established fact that a reader will be distracted by the
                  readable content of a page when looking at its layout </p>
              <button class="btn">Read More</button>
          </div>
          <div class="introduction-img display-sm-none">
              <img src="assets/images/overlay1.png" alt="">
          </div>
  </div>
</section>


<!-- PROGRAMS SECTION -->
<section class="programs | padding-block-900" id="programs-section">
  <div class="container">
      <h2 class="fs-secondary-heading fw-bold uppercase text-center">Our <span class="special-text">Programs</span></h2>
      <div class="items-wrapper | padding-block-700">
          <div class="program-item">
              <img src="assets/images/program-img1.jpg" alt="">
              <div class="program-item-content">
                  <h3 class="fw-semi-bold fs-700 text-shadow-dark">Strength Taininig</h3>
                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. itaque fugiat aspernatur.</p>
              </div>
          </div>
          <div class="program-item">
              <img src="assets/images/program-img2.jpg" alt="">
              <div class="program-item-content">
                  <h3 class="fw-semi-bold fs-700 text-shadow-dark">Weight Taininig</h3>
                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. itaque fugiat aspernatur.</p>
              </div>
          </div>
          <div class="program-item">
              <img src="assets/images/program-img3.jpg" alt="">
              <div class="program-item-content">
                  <h3 class="fw-semi-bold fs-700 text-shadow-dark">Fat Losing</h3>
                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. itaque fugiat aspernatur.</p>
              </div>
          </div>
          <div class="program-item">
              <img src="assets/images/program-img4.jpg" alt="">
              <div class="program-item-content">
                  <h3 class="fw-semi-bold fs-700 text-shadow-dark">Speed Building</h3>
                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. itaque fugiat aspernatur.</p>
              </div>
          </div>
      </div>
      <button class="btn" data-type="btn-secondary">Explore More...</button>
  </div>
</section>


<!-- PRODUCTS SECTION -->
<section class="products | padding-block-900 bg-secondary" id="products-section">
  <div class="container">
      <h2 class="fs-secondary-heading fw-bold uppercase text-center"><span class="special-text">Our</span> Products</h2>
      <div class="items-wrapper padding-block-700">
          <div class="product-item bg-dark">
              <img src="assets/images/product1.png" alt="">
              <div class="product-item-content">
                  <h3 class="fw-semi-bold fs-700 special-text">Item 1</h3>
                  <p>$55.00</p>
              </div>
          </div>
          <div class="product-item bg-dark">
              <img src="assets/images/product2.png" alt="">
              <div class="product-item-content">
                  <h3 class="fw-semi-bold fs-700 special-text">Item 2</h3>
                  <p>$55.00</p>
              </div>
          </div>
          <div class="product-item bg-dark">
              <img src="assets/images/product3.png" alt="">
              <div class="product-item-content">
                  <h3 class="fw-semi-bold fs-700 special-text">Item 3</h3>
                  <p>$55.00</p>
              </div>
          </div>
          <div class="product-item bg-dark">
              <img src="assets/images/product4.png" alt="">
              <div class="product-item-content">
                  <h3 class="fw-semi-bold fs-700 special-text">Item 4</h3>
                  <p>$55.00</p>
              </div>
          </div>
      </div>
      <button class="btn" data-type="btn-center">Load more...</button>
  </div>
</section>

<!-- PRICING SECTION -->
<section class="pricing | padding-block-900" id="pricing-section">
  <div class="container">
      <h2 class="fs-secondary-heading fw-bold uppercase text-center">Our <span class="special-text">PLANS</span></h2>
      <div class="plans padding-block-700 items-wrapper">
          <div class="plan-item bg-secondary">
              <h4 class="fs-700 fw-semi-bold">$19 <span class="special-text fs-200">/Month</span></h4>
              <div class="offer-title">Exclusive Offer</div>
              <ul class="package-list">
                  <li>training</li>
                  <li>training</li>
                  <li>training</li>
                  <li>training</li>
                  <li>training</li>
              </ul>

          </div>
          <div class="plan-item bg-secondary">
              <h4 class="fs-700 fw-semi-bold">$99 <span class="special-text fs-200">/Month</span></h4>
              <div class="offer-title">Exclusive Offer</div>
              <ul class="package-list">
                  <li>training</li>
                  <li>training</li>
                  <li>training</li>
                  <li>training</li>
                  <li>training</li>
                  <li>training</li>
                  <li>training</li>
              </ul>

          </div>
          <div class="plan-item bg-secondary">
              <h4 class="fs-700 fw-semi-bold">$49 <span class="special-text fs-200">/Month</span></h4>
              <div class="offer-title">Exclusive Offer</div>
              <ul class="package-list">
                  <li>training</li>
                  <li>training</li>
                  <li>training</li>
                  <li>training</li>
                  <li>training</li>
              </ul>
          </div>
      </div>
  </div>
</section>


<!-- FOOTER -->
<footer class="primary-footer | padding-block-900 bg-secondary">
  <div class="container">
      <div class="even-columns text-center-sm-only">
          <div>
              <h4 class="fs-700 uppercase fw-bold">Follow us</h4>
              <ul class="social-icons " role="list">
                  <li><a href=""><i class="fa-brands fa-facebook | text-white fs-700"></i></a></li>
                  <li><a href=""><i class="fa-brands fa-twitter | text-white fs-700"></i></a></li>
                  <li><a href=""><i class="fa-brands fa-instagram | text-white fs-700"></i></a></li>
                  <li><a href=""><i class="fa-brands fa-linkedin | text-white fs-700"></i></a></li>
              </ul>
              <a class="logo">
                  <i class="fa-solid fa-dumbbell"></i>Fitneed</a>
          </div>
          <div>
              <h4 class="fs-700 uppercase fw-bold">Links</h4>
              <ul role="list" class="primary-footer-links">
                  <li><a href="">Home</a></li>
                  <li><a href="">Programs</a></li>
                  <li><a href="">Products</a></li>
                  <li><a href="">Pricing</a></li>
              </ul>
          </div>
          <div>
              <h4 class="fs-700 uppercase fw-bold">Quick Contacts</h4>
              <ul role="list" class="contact-links">
                  <li><a href=""><i class="fa-solid fa-phone"></i>+93**35***52</a></li>
                  <li><a href=""><i class="fa-solid fa-envelope"></i>random123@test.com</a></li>
                  <li><a href=""><i class="fa-solid fa-user"></i>@test__123</a></li>
                  <li><a href=""><i class="fa-solid fa-globe"></i>www.randomuser.com</a></li>
                  <li><a href=""><i class="fa-solid fa-location-dot"></i>123/4 block 5 street #44 near bakery
                          california, America, USA</a></li>
              </ul>
          </div>
      </div>
      <hr>
      <h5 class="fs-500 fw-semi-bold text-center"><span class="special-text"><i
                  class="fa-solid fa-dumbbell"></i>FITNEED</span> Ⓒ 2023 - All Rights Reserved</h5>
  </div>


</footer>

3. Guys here is git repo link and put css, js and images inside scr/assets folder:

Git Repo

4. Guys please add below code inside scr/index.html file:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angular | Ecommerce Template</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
   
  <link
        href="https://fonts.googleapis.com/css2?family=Lora:wght@400;500;700&family=Sora:wght@400;500;700&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
    
</head>
<body>
  <app-root></app-root>
  
</body>
</html>

5. Guys please add below code inside angukar.json file:

...
"styles": [ ... 
"src/assets/css/style.css"
 ], 
"scripts": [ "src/assets/js/script.js"
 ]

Friends in the end must run ng serve command into your terminal to run the angular 16 ecommerce project.

Now we are done friends. If you have any kind of query, suggestion and new requirement then feel free to comment below.

Note: Friends, In this post, I just tell the basic setup and things, you can change the code according to your requirements.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad because with your views, I will make my next posts more good and helpful.

Jassa

Thanks

September 13, 2023

How to Create Custom Pipe in Angular 16 Application?
Hello to all, welcome to therichpost.com. In this post, I will tell you, How to Create Custom Pipe in Angular 16 Application?

Working Demo

How to Create Custom Pipe in Angular 16 Application?

Angular16 came and if you are new then you must check below link:
1. Angular 1 6 Tutorials
Here is the code snippet and please use carefully:

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

guys with below commands we will also get now pipe files
```
npm install -g @angular/cli 

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

cd angularform // Go inside project folder 

ng g pipe wordcount
```
3. Now guys we will add below code into our angularform/src/app/app.component.ts file:
```
...
export class AppComponent {
  ...
  customText: string = "Java is to JavaScript what car is";
  
}
```
4. Now guys we will add below code into our angularform/src/app/app.component.html file for web output:
```
<h3>Word count is ``{{customText}}`` string is :<br>{{ customText | wordcount }}</h3>
```
5. Now guys we will add below code into our angularform/src/app/wordcount.pipe.ts file to create custom pipe functionality:
```
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'wordcount'
})
export class WordcountPipe implements PipeTransform {
  transform(value: any, args?: any): any {
    return value.trim().split(/\s+/).length;
  }
}
```
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
September 11, 2023

Angular 16 Server Side Pagination Example

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 16 Server Side Pagination Example.

Working Demo

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

Angular 1 6 Tutorials

Here is the code snippet and please use carefully:

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

guys with below commands we will also get bootstrap, service file and pagination module

npm install -g @angular/cli 

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

cd angularform // Go inside project folder 

npm install ngx-pagination 

npm i @popperjs/core 

npm i bootstrap

ng g s users

2. Now guys we will add below code into our angularform/src/app/app.module.ts file:

... import { HttpClientModule } from '@angular/common/http';
import { NgxPaginationModule } from 'ngx-pagination';

@NgModule({ declarations: [ AppComponent ], 

imports: [ ... HttpClientModule,
NgxPaginationModule  ], 


providers: [], bootstrap: [AppComponent] }) export class AppModule { }

3. Now guys we will add below code into our angularform/src/app/app.component.ts file and main functionality is this:

import { Component } from '@angular/core';
import { UserService } from './user.service';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
...
  Users: any;
  allUsers: number = 0;
  pagination: number = 0;
  constructor(private userService: UserService) {}

  }
  fetchUsers() {
    this.userService.getUsers(this.pagination).subscribe((res: any) => {
      this.Users = res;
      this.allUsers = res.total;
      console.log(res.total);
    });
  }
  renderPage(event: number) {
    this.pagination = event;
    this.fetchUsers();
  }
  ngOnInit() {
    this.fetchUsers();
    console.log(this.fetchUsers());
   
  }
  
 
}

4. Now guys we will add below code into our angularform/src/app/app.component.html file for web output:

<div class="container mt-5">
  <table class="table">
    <thead>
      <tr>
        <th scope="col">ID</th>
        <th scope="col">Name</th>
        <th scope="col">Usernme</th>
        <th scope="col">Email</th>
      </tr>
    </thead>
    <tbody>
      <tr
        *ngFor="
          let user of Users
            | paginate
            
              : {
                  itemsPerPage: 6,
                  currentPage: pagination,
                  totalItems: allUsers
                }
        "
      >
        <td scope="row">{{ user.id }}</td>
        <td>{{ user.name }}</td>
        <td>{{ user.username }}</td>
        <td>{{ user.email }}</td>
      </tr>
    </tbody>
  </table>
  <div class="d-flex justify-content-center">
    <pagination-controls
      (pageChange)="renderPage($event)"
    ></pagination-controls>
  </div>
</div>

5. Now guys we will add below code into our angularform/src/app/user.service.ts file:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root',
})
export class UserService {
  private url = 'https://jsonplaceholder.typicode.com/users';
  constructor(private httpClient: HttpClient) {}
  getUsers(page: number) {
    return this.httpClient.get(this.url + '?page=' + page);
  }
  
 
}

6. Now guys we will add below code into our angularform/angular.json file to call bootstrap scripts:

...
"styles": [
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
             
            ],
            "scripts": [
              "node_modules/bootstrap/dist/js/bootstrap.min.js",
             
            ]

...

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

September 10, 2023

Angular 16 Modern Ecommerce Fully Responsive Website Template Free

Hello friends, welcome back to my blog. Today this blog post will tell you Angular 16 Modern Ecommerce Fully Responsive Website Template Free.

Live Demo

Angular 16 and Bootstrap 5 came and if you are new then you must check below two links:

Friends now I proceed onwards and here is the working code snippet and please use carefully this to avoid the mistakes:

1. Firstly friends we need fresh angular 16 setup and for this we need to run below commands but if you already have angular 16 setup then you can avoid below commands. Secondly we should also have latest node version installed on our system:

npm install -g @angular/cli 

ng new angulardemo//Create new Angular Project 

cd angulardemo // Go inside the Angular Project Folder

2. Now friends we just need to add below code into angulardemo/src/app/app.component.html file to get final out on the web browser:

<div class="hero_area">
  <!-- header section strats -->
  <header class="header_section">
    <div class="container-fluid">
      <nav class="navbar navbar-expand-lg custom_nav-container">
        <a class="navbar-brand" href="#">
          <img src="assets/images/logo.png" alt="" /><span>
            Zezmon
          </span>
        </a>

        <div class="navbar-collapse" id="">
          <div class="container">
            <div class=" mr-auto flex-column flex-lg-row align-items-center">
              <ul class="navbar-nav justify-content-between ">
                <div class="d-none d-lg-flex">
                  <li class="nav-item">
                    <a class="nav-link" href="#">
                      Customer Number : 01234567890</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">
                      Demo@gmail.com
                    </a>
                  </li>
                </div>
                <div class=" d-none d-lg-flex">
                  <li class="nav-item">
                    <a class="nav-link" href="#">
                      Login / Register
                    </a>
                  </li>
                  <form class="form-inline my-2 ml-5 mb-3 mb-lg-0">
                    <button class="btn  my-2 my-sm-0 nav_search-btn" type="submit"></button>
                  </form>
                </div>
              </ul>
            </div>
          </div>

          <div class="custom_menu-btn">
            <button onclick="openNav()"></button>
          </div>
          <div id="myNav" class="overlay">
            <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
            <div class="overlay-content">
              <a href="#">HOME</a>
              <a href="#">PRODUCTS</a>
            </div>
          </div>
        </div>
      </nav>
    </div>
  </header>
  <!-- end header section -->
  <!-- slider section -->
  <section class=" slider_section position-relative">
    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <div class="slider_item-box">
            <div class="slider_item-container">
              <div class="container-fluid">
                <div class="row">
                  <div class="offset-md-2 col-md-4">
                    <div class="slider_item-detail">
                      <div>
                        <h2 class="slider_heading">
                          50% OFF <br />
                          First order
                        </h2>
                        <p>
                          Lorem ipsum dolor sit amet, consectetur adipiscing
                          elit, sed do eiusmod tempor incididunt ut labore
                          et dolore magna aliqua. Ut enim ad minim veniam,
                          quis nostrud exercitation ullamco laboris nis
                        </p>
                        <div class="d-flex">
                          <a href="" class="slider_btn">
                            Order Now
                          </a>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="hero_img-box">
                      <img src="assets/images/hero.png" alt="" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="carousel-item">
          <div class="slider_item-box">
            <div class="slider_item-container">
              <div class="container-fluid">
                <div class="row">
                  <div class="offset-md-2 col-md-4">
                    <div class="slider_item-detail">
                      <div>
                        <h2 class="slider_heading">
                          50% OFF <br />
                          First order
                        </h2>
                        <p>
                          Lorem ipsum dolor sit amet, consectetur adipiscing
                          elit, sed do eiusmod tempor incididunt ut labore
                          et dolore magna aliqua. Ut enim ad minim veniam,
                          quis nostrud exercitation ullamco laboris nis
                        </p>
                        <div class="d-flex">
                          <a href="" class="slider_btn">
                            Order Now
                          </a>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="hero_img-box">
                      <img src="assets/images/hero.png" alt="" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="carousel-item">
          <div class="slider_item-box">
            <div class="slider_item-container">
              <div class="container-fluid">
                <div class="row">
                  <div class="offset-md-2 col-md-4">
                    <div class="slider_item-detail">
                      <div>
                        <h2 class="slider_heading">
                          50% OFF <br />
                          First order
                        </h2>
                        <p>
                          Lorem ipsum dolor sit amet, consectetur adipiscing
                          elit, sed do eiusmod tempor incididunt ut labore
                          et dolore magna aliqua. Ut enim ad minim veniam,
                          quis nostrud exercitation ullamco laboris nis
                        </p>
                        <div class="d-flex">
                          <a href="" class="slider_btn">
                            Order Now
                          </a>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="hero_img-box">
                      <img src="assets/images/hero.png" alt="" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
        <span class="sr-only">Next</span>
      </a>
    </div>
  </section>

  <!-- end slider section -->
</div>

<!-- detail section -->
<section class="detail_section">
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-3">
        <div class="detail_img-box">
          <img src="assets/images/detail.png" alt="" class="w-100" />
        </div>
      </div>
      <div class=" col-lg-7">
        <div class="detail_container">
          <div class="detail-box d-box-1">
            <a href="">
              <div class="detail-content">
                <img src="assets/images/d-1.png" alt="" />
                <h5>
                  Care kids
                </h5>
              </div>
            </a>
          </div>
          <div class="detail-box d-box-2">
            <a href="">
              <div class="detail-content">
                <img src="assets/images/d-2.png" alt="" />
                <h5>
                  Baby boy
                </h5>
              </div>
            </a>
          </div>
          <div class="detail-box d-box-3">
            <a href="">
              <div class="detail-content">
                <img src="assets/images/d-3.png" alt="" />
                <h5>
                  Baby girl
                </h5>
              </div>
            </a>
          </div>
          <div class="detail-box d-box-4">
            <a href="">
              <div class="detail-content">
                <img src="assets/images/d-4.png" alt="" />
                <h5>
                  Sale
                </h5>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- end detail section -->

<!-- products section -->
<section class="products_section">
  <div class="heading_container">
    <h2>
      New Products In Store
    </h2>
    <p>
      Featured Product Just Arrived
    </p>
  </div>
  <div class="container layout_padding">
    <div class="product_container">
      <a href="">
        <div class="product_box">
          <div class="product_img-box">
            <img src="assets/images/p1.png" alt="" />
            <span>
              Sale
            </span>
          </div>
          <div class="product_detail-box">
            <span>
              $120.00
            </span>
            <p>
              Passage of Lorem Ipsum, you
            </p>
          </div>
        </div>
      </a>
      <a href="">
        <div class="product_box">
          <div class="product_img-box">
            <img src="assets/images/p2.png" alt="" />
            <span>
              Sale
            </span>
          </div>
          <div class="product_detail-box">
            <span>
              $110.00
            </span>
            <p>
              Passage of Lorem Ipsum, you
            </p>
          </div>
        </div>
      </a>
      <a href="">
        <div class="product_box">
          <div class="product_img-box">
            <img src="assets/images/p3.png" alt="" />
            <span>
              Sale
            </span>
          </div>
          <div class="product_detail-box">
            <span>
              $150.00
            </span>
            <p>
              Passage of Lorem Ipsum, you
            </p>
          </div>
        </div>
      </a>
      <a href="">
        <div class="product_box">
          <div class="product_img-box">
            <img src="assets/images/p4.png" alt="" />
            <span>
              Sale
            </span>
          </div>
          <div class="product_detail-box">
            <span>
              $150.00
            </span>
            <p>
              Passage of Lorem Ipsum, you
            </p>
          </div>
        </div>
      </a>
      <a href="">
        <div class="product_box">
          <div class="product_img-box">
            <img src="assets/images/p5.png" alt="" />
            <span>
              Sale
            </span>
          </div>
          <div class="product_detail-box">
            <span>
              $150.00
            </span>
            <p>
              Passage of Lorem Ipsum, you
            </p>
          </div>
        </div>
      </a>
      <a href="">
        <div class="product_box">
          <div class="product_img-box">
            <img src="assets/images/p6.png" alt="" />
            <span>
              Sale
            </span>
          </div>
          <div class="product_detail-box">
            <span>
              $150.00
            </span>
            <p>
              Passage of Lorem Ipsum, you
            </p>
          </div>
        </div>
      </a>
      <a href="">
        <div class="product_box">
          <div class="product_img-box">
            <img src="assets/images/p7.png" alt="" />
            <span>
              Sale
            </span>
          </div>
          <div class="product_detail-box">
            <span>
              $150.00
            </span>
            <p>
              Passage of Lorem Ipsum, you
            </p>
          </div>
        </div>
      </a>
      <a href="">
        <div class="product_box">
          <div class="product_img-box">
            <img src="assets/images/p8.png" alt="" />
            <span>
              Sale
            </span>
          </div>
          <div class="product_detail-box">
            <span>
              $150.00
            </span>
            <p>
              Passage of Lorem Ipsum, you
            </p>
          </div>
        </div>
      </a>
      <a href="">
        <div class="product_box">
          <div class="product_img-box">
            <img src="assets/images/p9.png" alt="" />
            <span>
              Sale
            </span>
          </div>
          <div class="product_detail-box">
            <span>
              $150.00
            </span>
            <p>
              Passage of Lorem Ipsum, you
            </p>
          </div>
        </div>
      </a>
      <a href="">
        <div class="product_box">
          <div class="product_img-box">
            <img src="assets/images/p10.png" alt="" />
            <span>
              Sale
            </span>
          </div>
          <div class="product_detail-box">
            <span>
              $150.00
            </span>
            <p>
              Passage of Lorem Ipsum, you
            </p>
          </div>
        </div>
      </a>
      <a href="">
        <div class="product_box">
          <div class="product_img-box">
            <img src="assets/images/p11.png" alt="" />
            <span>
              Sale
            </span>
          </div>
          <div class="product_detail-box">
            <span>
              $150.00
            </span>
            <p>
              Passage of Lorem Ipsum, you
            </p>
          </div>
        </div>
      </a>
      <a href="">
        <div class="product_box">
          <div class="product_img-box">
            <img src="assets/images/p12.png" alt="" />
            <span>
              Sale
            </span>
          </div>
          <div class="product_detail-box">
            <span>
              $150.00
            </span>
            <p>
              Passage of Lorem Ipsum, you
            </p>
          </div>
        </div>
      </a>
    </div>
  </div>
</section>

<!-- end products section -->

<!-- find section -->
<section class="find_section layout_padding-bottom">
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-6 col-md-8 offset-md-2">
        <div class="find_container">
          <div class="row">
            <div class="col-sm-6">
              <div class="find_container-img">
                <img src="assets/images/find-img.png" alt="" />
              </div>
            </div>
            <div class="col-sm-6">
              <h3>
                Find Everything <br />
                From A to Z
              </h3>
              <p>
                Shop Back to school
              </p>
            </div>
          </div>
        </div>
        <div class="shop_container">
          <div class="row">
            <div class="col-sm-6">
              <p>
                Shoes
              </p>
              <h3>
                Shop by catagories
              </h3>
              <div>
                <a href="">
                  View More
                </a>
              </div>
            </div>
            <div class="col-sm-6">
              <div class="shoe_img-box">
                <img src="assets/images/shoes.png" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="find_img-box">
          <img src="assets/images/find-hero.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</section>

<!-- end find section -->
<!-- client section -->
<section class="client_section layout_padding">
  <div class="container">
    <h2>
      What our Customer says
    </h2>
    <div id="carouselExample2Controls" class="carousel slide" data-ride="carousel">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <div class="row layout_padding2">
            <div class="col-md-6">
              <div class="client_box">
                <div class="client_id-box">
                  <div class="client_img-box">
                    <img src="assets/images/client.png" alt="" />
                  </div>
                  <h4>Carlac liyo</h4>
                </div>
                <div class="client_detail">
                  <p>
                    There are many variations of passages of Lorem Ipsum
                    available, but the majority have suffered alteration in some
                    form, by injected humour, or randomised words which don't look
                    even slightly believable. If you are going to use a passage of
                    Lorem Ipsum, you need to be sure there isn't anything
                    embarrassing hidden in the middle of text.
                  </p>
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="client_box">
                <div class="client_id-box">
                  <div class="client_img-box">
                    <img src="assets/images/client.png" alt="" />
                  </div>
                  <h4>Carlac liyo</h4>
                </div>
                <div class="client_detail">
                  <p>
                    There are many variations of passages of Lorem Ipsum
                    available, but the majority have suffered alteration in some
                    form, by injected humour, or randomised words which don't look
                    even slightly believable. If you are going to use a passage of
                    Lorem Ipsum, you need to be sure there isn't anything
                    embarrassing hidden in the middle of text.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="carousel-item">
          <div class="row layout_padding2">
            <div class="col-md-6">
              <div class="client_box">
                <div class="client_id-box">
                  <div class="client_img-box">
                    <img src="assets/images/client.png" alt="" />
                  </div>
                  <h4>Carlac liyo</h4>
                </div>
                <div class="client_detail">
                  <p>
                    There are many variations of passages of Lorem Ipsum
                    available, but the majority have suffered alteration in some
                    form, by injected humour, or randomised words which don't look
                    even slightly believable. If you are going to use a passage of
                    Lorem Ipsum, you need to be sure there isn't anything
                    embarrassing hidden in the middle of text.
                  </p>
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="client_box">
                <div class="client_id-box">
                  <div class="client_img-box">
                    <img src="assets/images/client.png" alt="" />
                  </div>
                  <h4>Carlac liyo</h4>
                </div>
                <div class="client_detail">
                  <p>
                    There are many variations of passages of Lorem Ipsum
                    available, but the majority have suffered alteration in some
                    form, by injected humour, or randomised words which don't look
                    even slightly believable. If you are going to use a passage of
                    Lorem Ipsum, you need to be sure there isn't anything
                    embarrassing hidden in the middle of text.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="carousel-item">
          <div class="row layout_padding2">
            <div class="col-md-6">
              <div class="client_box">
                <div class="client_id-box">
                  <div class="client_img-box">
                    <img src="assets/images/client.png" alt="" />
                  </div>
                  <h4>Carlac liyo</h4>
                </div>
                <div class="client_detail">
                  <p>
                    There are many variations of passages of Lorem Ipsum
                    available, but the majority have suffered alteration in some
                    form, by injected humour, or randomised words which don't look
                    even slightly believable. If you are going to use a passage of
                    Lorem Ipsum, you need to be sure there isn't anything
                    embarrassing hidden in the middle of text.
                  </p>
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="client_box">
                <div class="client_id-box">
                  <div class="client_img-box">
                    <img src="assets/images/client.png" alt="" />
                  </div>
                  <h4>Carlac liyo</h4>
                </div>
                <div class="client_detail">
                  <p>
                    There are many variations of passages of Lorem Ipsum
                    available, but the majority have suffered alteration in some
                    form, by injected humour, or randomised words which don't look
                    even slightly believable. If you are going to use a passage of
                    Lorem Ipsum, you need to be sure there isn't anything
                    embarrassing hidden in the middle of text.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <a class="carousel-control-prev" href="#carouselExample2Controls" role="button" data-slide="prev">

        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carouselExample2Controls" role="button" data-slide="next">

        <span class="sr-only">Next</span>
      </a>
    </div>

  </div>
  <div class="container">
    <div class="item_container">
      <div class="row">
        <div class="col-sm-7">
          <h3>
            Best offers on any makeup items
          </h3>
          <p>
            Contrary to popular belief, Lorem Ipsum is not simply random
            text. It has roots in a piece of classical
          </p>
          <div>
            <a href="">
              Shop Now
            </a>
          </div>
        </div>
        <div class="col-sm-5">
          <div class="item_img-box">
            <img src="assets/images/items.png" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- end client section -->

<!-- sign section -->
<section class="sign_section layout_padding2">
  <div class="container">
    <div class="row">
      <div class="col-md-5">
        <h3>
          Sign up for Newsletter
        </h3>
        <p>
          There are many variations of passages of Lorem Ipsum available,
          but the majority have suffered
        </p>
      </div>
      <div class="col-md-7">
        <form action="">
          <input type="email" placeholder="Enter your email" />
          <button>
            Sign Up
          </button>
        </form>
      </div>
    </div>
  </div>
</section>

<!-- end sign section -->

<!-- info section -->
<section class="info_section layout_padding">
  <div class="container links_container">
    <div class="row ">
      <div class="col-md-3">
        <h3>
          CUSTOMER SERVICE
        </h3>
        <ul>
          <li>
            <a href="">
              International Help
            </a>
          </li>
          <li>
            <a href="">
              Contact Customer Care
            </a>
          </li>
          <li>
            <a href="">
              Return Policy
            </a>
          </li>
          <li>
            <a href="">
              Privacy Policy
            </a>
          </li>
          <li>
            <a href="">
              Shipping Information
            </a>
          </li>
          <li>
            <a href="">
              Promotion Terms
            </a>
          </li>
        </ul>
      </div>
      <div class="col-md-3">
        <h3>
          LET US HELP YOU
        </h3>
        <ul>
          <li>
            <a href="">
              Your Account
            </a>
          </li>
          <li>
            <a href="">
              Your Orders
            </a>
          </li>
          <li>
            <a href="">
              Shipping Rates & Policies
            </a>
          </li>
          <li>
            <a href="">
              Amazon Prime
            </a>
          </li>
          <li>
            <a href="">
              Returns & Replacements
            </a>
          </li>
          <li>
            <a href="">
              Help
            </a>
          </li>
        </ul>
      </div>
      <div class="col-md-3">
        <h3>
          INFORMATION
        </h3>
        <ul>
          <li>
            <a href="">
              About Us
            </a>
          </li>
          <li>
            <a href="">
              Careers
            </a>
          </li>
          <li>
            <a href="">
              Sell on shop
            </a>
          </li>
          <li>
            <a href="">
              Press & News
            </a>
          </li>
          <li>
            <a href="">
              Competitions
            </a>
          </li>
          <li>
            <a href="">
              Terms & Conditions
            </a>
          </li>
        </ul>
      </div>
      <div class="col-md-3">
        <h3>
          OUR SHOP
        </h3>
        <ul>
          <li>
            <a href="">
              Daily Deals
            </a>
          </li>
          <li>
            <a href="">
              App Only Deals
            </a>
          </li>
          <li>
            <a href="">
              Our Hottest Products
            </a>
          </li>
          <li>
            <a href="">
              Gift Vouchers
            </a>
          </li>
          <li>
            <a href="">
              Trending Product
            </a>
          </li>
          <li>
            <a href="">
              Hot Flash Sale
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="follow_container">
      <div class="row">
        <div class="col-md-9">
          <div class="app_container">
            <h3>
              DOWNLOAD OUR APPS

            </h3>
            <div>
              <img src="assets/images/google-play.png" alt="">
              <img src="assets/images/apple-store.png" alt="">
            </div>
          </div>
        </div>
        <div class="col-md-3 ">
          <div class="info_social">
            <div>
              <a href="">
                <img src="assets/images/fb.png" alt="">
              </a>
            </div>
            <div>
              <a href="">
                <img src="assets/images/twitter.png" alt="">
              </a>
            </div>
            <div>
              <a href="">
                <img src="assets/images/linkedin.png" alt="">
              </a>
            </div>
            <div>
              <a href="">
                <img src="assets/images/instagram.png" alt="">
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- end info section -->

<!-- footer section -->
<section class="container-fluid footer_section">
  <p>
    Copyright &copy; 2023 All Rights Reserved By
    <a href="https://therichpost.com/">Jassa</a>
  </p>
</section>
<!-- footer section -->

3. Guys here is git repo link and put css, js and images inside scr/assets folder:

Git Repo

4. Guys please add below code inside scr/index.html file:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angular | Ecommerce Template</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
   
    

  <!-- fonts style -->
  <link href="https://fonts.googleapis.com/css?family=Dosis:400,500|Poppins:400,700&display=swap" rel="stylesheet" />
  
</head>
<body>
  <app-root></app-root>
  

  <script>
    function openNav() {
      document.getElementById("myNav").style.width = "100%";
    }

    function closeNav() {
      document.getElementById("myNav").style.width = "0%";
    }
  </script>
</body>
</html>

5. Guys please add below code inside angukar.json file:

... 
"styles": [ ... ,
"src/assets/css/bootstrap.css",
"src/assets/css/style.css",
"src/assets/css/responsive.css" ], 
"scripts": [ "src/assets/js/jquery-3.4.1.min.js",
"src/assets/js/bootstrap.js"
 ]

Friends in the end must run ng serve command into your terminal to run the angular 16 ecommerce project.

Now we are done friends. If you have any kind of query, suggestion and new requirement then feel free to comment below.

Note: Friends, In this post, I just tell the basic setup and things, you can change the code according to your requirements.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad because with your views, I will make my next posts more good and helpful.

Jassa

Thanks

September 6, 2023

Pet Food Shop Ecommerce Template in Angular 16

Hello friends, welcome back to my blog. Today this blog post will tell you Pet Food Shop Ecommerce Template in Angular 16.

Live Demo

Angular 16 and Bootstrap 5 came and if you are new then you must check below two links:

Friends now I proceed onwards and here is the working code snippet and please use carefully this to avoid the mistakes:

1. Firstly friends we need fresh angular 16 setup and for this we need to run below commands but if you already have angular 16 setup then you can avoid below commands. Secondly we should also have latest node version installed on our system:

npm install -g @angular/cli 

ng new angulardemo//Create new Angular Project 

cd angulardemo // Go inside the Angular Project Folder

ng add @ionic/angular

2. Now friends we just need to add below code into angulardemo/src/app/app.component.html file to get final out on the web browser:

<!-- 
    - #HEADER
  -->

  <header class="header" data-header>
    <div class="container">

      <button class="nav-toggle-btn" aria-label="toggle manu" data-nav-toggler>
        <ion-icon name="menu-outline" aria-hidden="true" class="menu-icon"></ion-icon>
        <ion-icon name="close-outline" aria-label="true" class="close-icon"></ion-icon>
      </button>

      <a href="#" class="logo">Kitter</a>

      <nav class="navbar" data-navbar>
        <ul class="navbar-list">

          <li class="navbar-item">
            <a href="#home" class="navbar-link" data-nav-link>Home</a>
          </li>

          <li class="navbar-item">
            <a href="#shop" class="navbar-link" data-nav-link>Shop</a>
          </li>

          <li class="navbar-item">
            <a href="#" class="navbar-link" data-nav-link>Collections</a>
          </li>

          <li class="navbar-item">
            <a href="#" class="navbar-link" data-nav-link>Blogs</a>
          </li>

          <li class="navbar-item">
            <a href="#" class="navbar-link" data-nav-link>Contact</a>
          </li>

        </ul>

        <a href="#" class="navbar-action-btn">Log In</a>
      </nav>

      <div class="header-actions">

        <button class="action-btn" aria-label="Search">
          <ion-icon name="search-outline" aria-hidden="true"></ion-icon>
        </button>

        <button class="action-btn user" aria-label="User">
          <ion-icon name="person-outline" aria-hidden="true"></ion-icon>
        </button>

        <button class="action-btn" aria-label="cart">
          <ion-icon name="bag-handle-outline" aria-hidden="true"></ion-icon>

          <span class="btn-badge">0</span>
        </button>

      </div>

    </div>
  </header>





  <main>
    <article>

      <!-- 
        - #HERO
      -->

      <section class="section hero has-bg-image" id="home" aria-label="home"
        style="background-image: url('assets/images/hero-banner.jpg')">
        <div class="container">

          <h1 class="h1 hero-title">
            <span class="span">High Quality</span> Pet Food
          </h1>

          <p class="hero-text">Sale up to 40% off today</p>

          <a href="#" class="btn">Shop Now</a>

        </div>
      </section>





      <!-- 
        - #CATEGORY
      -->

      <section class="section category" aria-label="category">
        <div class="container">

          <h2 class="h2 section-title">
            <span class="span">Top</span> categories
          </h2>

          <ul class="has-scrollbar">

            <li class="scrollbar-item">
              <div class="category-card">

                <figure class="card-banner img-holder" style="--width: 330; --height: 300;">
                  <img src="assets/images/category-1.jpg" width="330" height="300" loading="lazy" alt="Cat Food"
                    class="img-cover">
                </figure>

                <h3 class="h3">
                  <a href="#" class="card-title">Cat Food</a>
                </h3>

              </div>
            </li>

            <li class="scrollbar-item">
              <div class="category-card">

                <figure class="card-banner img-holder" style="--width: 330; --height: 300;">
                  <img src="assets/images/category-2.jpg" width="330" height="300" loading="lazy" alt="Cat Toys"
                    class="img-cover">
                </figure>

                <h3 class="h3">
                  <a href="#" class="card-title">Cat Toys</a>
                </h3>

              </div>
            </li>

            <li class="scrollbar-item">
              <div class="category-card">

                <figure class="card-banner img-holder" style="--width: 330; --height: 300;">
                  <img src="assets/images/category-3.jpg" width="330" height="300" loading="lazy" alt="Dog Food"
                    class="img-cover">
                </figure>

                <h3 class="h3">
                  <a href="#" class="card-title">Dog Food</a>
                </h3>

              </div>
            </li>

            <li class="scrollbar-item">
              <div class="category-card">

                <figure class="card-banner img-holder" style="--width: 330; --height: 300;">
                  <img src="assets/images/category-4.jpg" width="330" height="300" loading="lazy" alt="Dog Toys"
                    class="img-cover">
                </figure>

                <h3 class="h3">
                  <a href="#" class="card-title">Dog Toys</a>
                </h3>

              </div>
            </li>

            <li class="scrollbar-item">
              <div class="category-card">

                <figure class="card-banner img-holder" style="--width: 330; --height: 300;">
                  <img src="assets/images/category-5.jpg" width="330" height="300" loading="lazy"
                    alt="Dog Sumpplements" class="img-cover">
                </figure>

                <h3 class="h3">
                  <a href="#" class="card-title">Dog Sumpplements</a>
                </h3>

              </div>
            </li>

          </ul>

        </div>
      </section>





      <!-- 
        - #OFFERS
      -->

      <section class="section offer" aria-label="offer">
        <div class="container">

          <ul class="grid-list">

            <li>
              <div class="offer-card has-bg-image img-holder"
                style="background-image: url('assets/images/offer-banner-1.jpg'); --width: 540; --height: 374;">

                <p class="card-subtitle">Selected Items. Online Only.</p>

                <h3 class="h3 card-title">
                  Hot Summer <span class="span">Deals</span>
                </h3>

                <a href="#" class="btn">Read More</a>

              </div>
            </li>

            <li>
              <div class="offer-card has-bg-image img-holder"
                style="background-image: url('assets/images/offer-banner-2.jpg'); --width: 540; --height: 374;">

                <p class="card-subtitle">Treats & Grooming</p>

                <h3 class="h3 card-title">
                  Spoil your true <span class="span">love</span>
                </h3>

                <a href="#" class="btn">Read More</a>

              </div>
            </li>

            <li>
              <div class="offer-card has-bg-image img-holder"
                style="background-image: url('assets/images/offer-banner-3.jpg'); --width: 540; --height: 374;">

                <p class="card-subtitle">Our Brand You Will Love</p>

                <h3 class="h3 card-title">
                  New in this <span class="span">year</span>
                </h3>

                <a href="#" class="btn">Read More</a>

              </div>
            </li>

          </ul>

        </div>
      </section>





      <!-- 
        - #PRODUCT
      -->

      <section class="section product" id="shop" aria-label="product">
        <div class="container">

          <h2 class="h2 section-title">
            <span class="span">Best</span> Seller
          </h2>

          <ul class="grid-list">

            <li>
              <div class="product-card">

                <div class="card-banner img-holder" style="--width: 360; --height: 360;">
                  <img src="assets/images/product-1.jpg" width="360" height="360" loading="lazy"
                    alt="Commodo leo sed porta" class="img-cover default">
                  <img src="assets/images/product-1_0.jpg" width="360" height="360" loading="lazy"
                    alt="Commodo leo sed porta" class="img-cover hover">

                  <button class="card-action-btn" aria-label="add to card" title="Add To Card">
                    <ion-icon name="bag-add-outline" aria-hidden="true"></ion-icon>
                  </button>
                </div>

                <div class="card-content">

                  <div class="wrapper">
                    <div class="rating-wrapper">
                      <ion-icon name="star" aria-hidden="true"></ion-icon>
                      <ion-icon name="star" aria-hidden="true"></ion-icon>
                      <ion-icon name="star" aria-hidden="true"></ion-icon>
                      <ion-icon name="star" aria-hidden="true"></ion-icon>
                      <ion-icon name="star" aria-hidden="true"></ion-icon>
                    </div>

                    <span class="span">(1)</span>
                  </div>

                  <h3 class="h3">
                    <a href="#" class="card-title">Commodo leo sed porta</a>
                  </h3>

                  <data class="card-price" value="15">$15.00</data>

                </div>

              </div>
            </li>

            <li>
              <div class="product-card">

                <div class="card-banner img-holder" style="--width: 360; --height: 360;">
                  <img src="assets/images/product-2.jpg" width="360" height="360" loading="lazy"
                    alt="Purus consequat congue sit" class="img-cover default">
                  <img src="assets/images/product-2_0.jpg" width="360" height="360" loading="lazy"
                    alt="Purus consequat congue sit" class="img-cover hover">

                  <button class="card-action-btn" aria-label="add to card" title="Add To Card">
                    <ion-icon name="bag-add-outline" aria-hidden="true"></ion-icon>
                  </button>
                </div>

                <div class="card-content">

                  <div class="wrapper">
                    <div class="rating-wrapper gray">
                      <ion-icon name="star" aria-hidden="true"></ion-icon>
                      <ion-icon name="star" aria-hidden="true"></ion-icon>
                      <ion-icon name="star" aria-hidden="true"></ion-icon>
                      <ion-icon name="star" aria-hidden="true"></ion-icon>
                      <ion-icon name="star" aria-hidden="true"></ion-icon>
                    </div>

                    <span class="span">(0)</span>
                  </div>

                  <h3 class="h3">
                    <a href="#" class="card-title">Purus consequat congue sit</a>
                  </h3>

                  <data class="card-price" value="45">$45.00</data>

                </div>

              </div>
            </li>

            <li>
              <div class="product-card">

                <div class="card-banner img-holder" style="--width: 360; --height: 360;">
                  <img src="assets/images/product-3.jpg" width="360" height="360" loading="lazy"
                    alt="Morbi vel arcu scelerisque" class="img-cover default">
                  <img src="assets/images/product-3_0.jpg" width="360" height="360" loading="lazy"
                    alt="Morbi vel arcu scelerisque" class="img-cover hover">

                  <button class="card-action-btn" aria-label="add to card" title="Add To Card">
                    <ion-icon name="bag-add-outline" aria-hidden="true"></ion-icon>
                  </button>
                </div>

                <div class="card-content">

                  <div class="wrapper">
                    <div class="rating-wrapper gray">
                      <ion-icon name="star" aria-hidden="true"></ion-icon>
                      <ion-icon name="star" aria-hidden="true"></ion-icon>
                      <ion-icon name="star" aria-hidden="true"></ion-icon>
                      <ion-icon name="star" aria-hidden="true"></ion-icon>
                      <ion-icon name="star" aria-hidden="true"></ion-icon>
                    </div>

                    <span class="span">(0)</span>
                  </div>

                  <h3 class="h3">
                    <a href="#" class="card-title">Morbi vel arcu scelerisque</a>
                  </h3>

                  <data class="card-price" value="45">$45.00</data>

                </div>

              </div>
            </li>

            <li>
              <div class="product-card">

                <div class="card-banner img-holder" style="--width: 360; --height: 360;">
                  <img src="assets/images/product-4.jpg" width="360" height="360" loading="lazy"
                    alt="Morbi vel arcu scelerisque" class="img-cover default">
                  <img src="assets/images/product-4_0.jpg" width="360" height="360" loading="lazy"
                    alt="Morbi vel arcu scelerisque" class="img-cover hover">

                  <button class="card-action-btn" aria-label="add to card" title="Add To Card">
                    <ion-icon name="bag-add-outline" aria-hidden="true"></ion-icon>
                  </button>
                </div>

                <div class="card-content">

                  <div class="wrapper">
                    <div class="rating-wrapper gray">
                      <ion-icon name="star" aria-hidden="true"></ion-icon>
                      <ion-icon name="star" aria-hidden="true"></ion-icon>
                      <ion-icon name="star" aria-hidden="true"></ion-icon>
                      <ion-icon name="star" aria-hidden="true"></ion-icon>
                      <ion-icon name="star" aria-hidden="true"></ion-icon>
                    </div>

                    <span class="span">(0)</span>
                  </div>

                  <h3 class="h3">
                    <a href="#" class="card-title">Morbi vel arcu scelerisque</a>
                  </h3>

                  <data class="card-price" value="49">$49.00</data>

                </div>

              </div>
            </li>

            <li>
              <div class="product-card">

                <div class="card-banner img-holder" style="--width: 360; --height: 360;">
                  <img src="assets/images/product-5.jpg" width="360" height="360" loading="lazy"
                    alt="Morbi vel arcu scelerisque" class="img-cover default">
                  <img src="assets/images/product-5_0.jpg" width="360" height="360" loading="lazy"
                    alt="Morbi vel arcu scelerisque" class="img-cover hover">

                  <button class="card-action-btn" aria-label="add to card" title="Add To Card">
                    <ion-icon name="bag-add-outline" aria-hidden="true"></ion-icon>
                  </button>
                </div>

                <div class="card-content">

                  <div class="wrapper">
                    <div class="rating-wrapper gray">
                      <ion-icon name="star" aria-hidden="true"></ion-icon>
                      <ion-icon name="star" aria-hidden="true"></ion-icon>
                      <ion-icon name="star" aria-hidden="true"></ion-icon>
                      <ion-icon name="star" aria-hidden="true"></ion-icon>
                      <ion-icon name="star" aria-hidden="true"></ion-icon>
                    </div>

                    <span class="span">(0)</span>
                  </div>

                  <h3 class="h3">
                    <a href="#" class="card-title">Morbi vel arcu scelerisque</a>
                  </h3>

                  <data class="card-price" value="85">$85.00</data>

                </div>

              </div>
            </li>

            <li>
              <div class="product-card">

                <div class="card-banner img-holder" style="--width: 360; --height: 360;">
                  <img src="assets/images/product-6.jpg" width="360" height="360" loading="lazy"
                    alt="Nam justo libero porta ege" class="img-cover default">
                  <img src="assets/images/product-6_0.jpg" width="360" height="360" loading="lazy"
                    alt="Nam justo libero porta ege" class="img-cover hover">

                  <button class="card-action-btn" aria-label="add to card" title="Add To Card">
                    <ion-icon name="bag-add-outline" aria-hidden="true"></ion-icon>
                  </button>
                </div>

                <div class="card-content">

                  <div class="wrapper">
                    <div class="rating-wrapper gray">
                      <ion-icon name="star" aria-hidden="true"></ion-icon>
                      <ion-icon name="star" aria-hidden="true"></ion-icon>
                      <ion-icon name="star" aria-hidden="true"></ion-icon>
                      <ion-icon name="star" aria-hidden="true"></ion-icon>
                      <ion-icon name="star" aria-hidden="true"></ion-icon>
                    </div>

                    <span class="span">(0)</span>
                  </div>

                  <h3 class="h3">
                    <a href="#" class="card-title">Nam justo libero porta ege</a>
                  </h3>

                  <data class="card-price" value="85">$85.00</data>

                </div>

              </div>
            </li>

            <li>
              <div class="product-card">

                <div class="card-banner img-holder" style="--width: 360; --height: 360;">
                  <img src="assets/images/product-7.jpg" width="360" height="360" loading="lazy"
                    alt="Nam justo libero porta ege" class="img-cover default">
                  <img src="assets/images/product-7_0.jpg" width="360" height="360" loading="lazy"
                    alt="Nam justo libero porta ege" class="img-cover hover">

                  <button class="card-action-btn" aria-label="add to card" title="Add To Card">
                    <ion-icon name="bag-add-outline" aria-hidden="true"></ion-icon>
                  </button>
                </div>

                <div class="card-content">

                  <div class="wrapper">
                    <div class="rating-wrapper gray">
                      <ion-icon name="star" aria-hidden="true"></ion-icon>
                      <ion-icon name="star" aria-hidden="true"></ion-icon>
                      <ion-icon name="star" aria-hidden="true"></ion-icon>
                      <ion-icon name="star" aria-hidden="true"></ion-icon>
                      <ion-icon name="star" aria-hidden="true"></ion-icon>
                    </div>

                    <span class="span">(0)</span>
                  </div>

                  <h3 class="h3">
                    <a href="#" class="card-title">Nam justo libero porta ege</a>
                  </h3>

                  <data class="card-price" value="85">$85.00</data>

                </div>

              </div>
            </li>

            <li>
              <div class="product-card">

                <div class="card-banner img-holder" style="--width: 360; --height: 360;">
                  <img src="assets/images/product-8.jpg" width="360" height="360" loading="lazy"
                    alt="Etiam commodo leo sed" class="img-cover default">
                  <img src="assets/images/product-8_0.jpg" width="360" height="360" loading="lazy"
                    alt="Etiam commodo leo sed" class="img-cover hover">

                  <button class="card-action-btn" aria-label="add to card" title="Add To Card">
                    <ion-icon name="bag-add-outline" aria-hidden="true"></ion-icon>
                  </button>
                </div>

                <div class="card-content">

                  <div class="wrapper">
                    <div class="rating-wrapper gray">
                      <ion-icon name="star" aria-hidden="true"></ion-icon>
                      <ion-icon name="star" aria-hidden="true"></ion-icon>
                      <ion-icon name="star" aria-hidden="true"></ion-icon>
                      <ion-icon name="star" aria-hidden="true"></ion-icon>
                      <ion-icon name="star" aria-hidden="true"></ion-icon>
                    </div>

                    <span class="span">(0)</span>
                  </div>

                  <h3 class="h3">
                    <a href="#" class="card-title">Etiam commodo leo sed</a>
                  </h3>

                  <data class="card-price" value="55">$55.00</data>

                </div>

              </div>
            </li>

          </ul>

        </div>
      </section>





      <!-- 
        - #SERVICE
      -->

      <section class="section service" aria-label="service">
        <div class="container">

          <img src="assets/images/service-image.png" width="122" height="136" loading="lazy" alt="" class="img">

          <h2 class="h2 section-title">
            <span class="span">What your pet needs,</span> when they need it.
          </h2>

          <ul class="grid-list">

            <li>
              <div class="service-card">

                <figure class="card-icon">
                  <img src="assets/images/service-icon-1.png" width="70" height="70" loading="lazy"
                    alt="service icon">
                </figure>

                <h3 class="h3 card-title">Free Same-Day Delivery</h3>

                <p class="card-text">
                  Order by 2pm local time to get free delivery on orders $35+ today.
                </p>

              </div>
            </li>

            <li>
              <div class="service-card">

                <figure class="card-icon">
                  <img src="assets/images/service-icon-2.png" width="70" height="70" loading="lazy"
                    alt="service icon">
                </figure>

                <h3 class="h3 card-title">30 Day Return</h3>

                <p class="card-text">
                  35% off your first order plus 5% off all future orders.
                </p>

              </div>
            </li>

            <li>
              <div class="service-card">

                <figure class="card-icon">
                  <img src="assets/images/service-icon-3.png" width="70" height="70" loading="lazy"
                    alt="service icon">
                </figure>

                <h3 class="h3 card-title">Security payment</h3>

                <p class="card-text">
                  25% off your online order of $50+. Available at most locations.
                </p>

              </div>
            </li>

            <li>
              <div class="service-card">

                <figure class="card-icon">
                  <img src="assets/images/service-icon-4.png" width="70" height="70" loading="lazy"
                    alt="service icon">
                </figure>

                <h3 class="h3 card-title">24/7 Support</h3>

                <p class="card-text">
                  Shop online to get orders over $35 shipped fast and free.
                </p>

              </div>
            </li>

          </ul>

        </div>
      </section>





      <!-- 
        - #CTA
      -->

      <section class="cta has-bg-image" aria-label="cta" style="background-image: url('assets/images/cta-bg.jpg')">
        <div class="container">

          <figure class="cta-banner">
            <img src="assets/images/cta-banner.png" width="900" height="660" loading="lazy" alt="cat" class="w-100">
          </figure>

          <div class="cta-content">

            <img src="assets/images/cta-icon.png" width="120" height="35" loading="lazy" alt="taste guarantee"
              class="img">

            <h2 class="h2 section-title">Taste it, love it or we’ll replace it… Guaranteed!</h2>

            <p class="section-text">
              At Petio, we believe your dog and cat will love their food so much that if they don’t … we’ll help you
              find a
              replacement. That’s our taste guarantee.
            </p>

            <a href="#" class="btn">Find out more</a>

          </div>

        </div>
      </section>





      <!-- 
        - #BRAND
      -->

      <section class="section brand" aria-label="brand">
        <div class="container">

          <h2 class="h2 section-title">
            <span class="span">Popular</span> Brands
          </h2>

          <ul class="has-scrollbar">

            <li class="scrollbar-item">
              <div class="brand-card img-holder" style="--width: 150; --height: 150;">
                <img src="assets/images/brand-1.jpg" width="150" height="150" loading="lazy" alt="brand logo"
                  class="img-cover">
              </div>
            </li>

            <li class="scrollbar-item">
              <div class="brand-card img-holder" style="--width: 150; --height: 150;">
                <img src="assets/images/brand-2.jpg" width="150" height="150" loading="lazy" alt="brand logo"
                  class="img-cover">
              </div>
            </li>

            <li class="scrollbar-item">
              <div class="brand-card img-holder" style="--width: 150; --height: 150;">
                <img src="assets/images/brand-3.jpg" width="150" height="150" loading="lazy" alt="brand logo"
                  class="img-cover">
              </div>
            </li>

            <li class="scrollbar-item">
              <div class="brand-card img-holder" style="--width: 150; --height: 150;">
                <img src="assets/images/brand-4.jpg" width="150" height="150" loading="lazy" alt="brand logo"
                  class="img-cover">
              </div>
            </li>

            <li class="scrollbar-item">
              <div class="brand-card img-holder" style="--width: 150; --height: 150;">
                <img src="assets/images/brand-5.jpg" width="150" height="150" loading="lazy" alt="brand logo"
                  class="img-cover">
              </div>
            </li>

          </ul>

        </div>
      </section>

    </article>
  </main>





  <!-- 
    - #FOOTER
  -->

  <footer class="footer" style="background-image: url('assets/images/footer-bg.jpg')">

    <div class="footer-top section">
      <div class="container">

        <div class="footer-brand">

          <a href="#" class="logo">Kitter</a>

          <p class="footer-text">
            If you have any question, please contact us at <a href="mailto:support@gmail.com"
              class="link">support@gmail.com</a>
          </p>

          <ul class="contact-list">

            <li class="contact-item">
              <ion-icon name="location-outline" aria-hidden="true"></ion-icon>

              <address class="address">
                Ludhiana Punjab
              </address>
            </li>

            <li class="contact-item">
              <ion-icon name="call-outline" aria-hidden="true"></ion-icon>

              <a href="tel:+11111111111" class="contact-link">(+1)-1111-11-1111-11111</a>
            </li>

          </ul>

          <ul class="social-list">

            <li>
              <a href="#" class="social-link">
                <ion-icon name="logo-facebook"></ion-icon>
              </a>
            </li>

            <li>
              <a href="#" class="social-link">
                <ion-icon name="logo-twitter"></ion-icon>
              </a>
            </li>

            <li>
              <a href="#" class="social-link">
                <ion-icon name="logo-pinterest"></ion-icon>
              </a>
            </li>

            <li>
              <a href="#" class="social-link">
                <ion-icon name="logo-instagram"></ion-icon>
              </a>
            </li>

          </ul>

        </div>

        <ul class="footer-list">

          <li>
            <p class="footer-list-title">Corporate</p>
          </li>

          <li>
            <a href="#" class="footer-link">Careers</a>
          </li>

          <li>
            <a href="#" class="footer-link">About Us</a>
          </li>

          <li>
            <a href="#" class="footer-link">Contact Us</a>
          </li>

          <li>
            <a href="#" class="footer-link">FAQs</a>
          </li>

          <li>
            <a href="#" class="footer-link">Vendors</a>
          </li>

          <li>
            <a href="#" class="footer-link">Affiliate Program</a>
          </li>

        </ul>

        <ul class="footer-list">

          <li>
            <p class="footer-list-title">Information</p>
          </li>

          <li>
            <a href="#" class="footer-link">Online Store</a>
          </li>

          <li>
            <a href="#" class="footer-link">Privacy Policy</a>
          </li>

          <li>
            <a href="#" class="footer-link">Refund Policy</a>
          </li>

          <li>
            <a href="#" class="footer-link">Shipping Policy</a>
          </li>

          <li>
            <a href="#" class="footer-link">Terms of Service</a>
          </li>

          <li>
            <a href="#" class="footer-link">Track Order</a>
          </li>

        </ul>

        <ul class="footer-list">

          <li>
            <p class="footer-list-title">Services</p>
          </li>

          <li>
            <a href="#" class="footer-link">Grooming</a>
          </li>

          <li>
            <a href="#" class="footer-link">Positive Dog Training</a>
          </li>

          <li>
            <a href="#" class="footer-link">Veterinary Services</a>
          </li>

          <li>
            <a href="#" class="footer-link">Petco Insurance</a>
          </li>

          <li>
            <a href="#" class="footer-link">Pet Adoption</a>
          </li>

          <li>
            <a href="#" class="footer-link">Resource Center</a>
          </li>

        </ul>

      </div>
    </div>

    <div class="footer-bottom">
      <div class="container">

        <p class="copyright">
          &copy; 2023 Made with ♥ by <a href="#" class="copyright-link">Jassa.</a>
        </p>

        <img src="assets/images/payment.png" width="397" height="32" loading="lazy" alt="payment method" class="img">

      </div>
    </div>

  </footer>

3. Guys here is git repo link and put css, js and images inside scr/assets folder:

Git Repo

4. Guys please add below code inside scr/index.html file:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angular | Fashion Template</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
   
   

  <!-- 
    - google font link
  -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Bangers&family=Carter+One&family=Nunito+Sans:wght@400;700&display=swap"
    rel="stylesheet">
   
</head>
<body id="top">
  <app-root></app-root>
  

  <!-- 
    - ionicon link
  -->
  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>

5. Guys please add below code inside angukar.json file:

...
"styles": [ ... 
"src/assets/css/style.css"
 ], 
"scripts": [ "src/assets/js/script.js"
 ]

Friends in the end must run ng serve command into your terminal to run the angular 16 ecommerce project.

Now we are done friends. If you have any kind of query, suggestion and new requirement then feel free to comment below.

Note: Friends, In this post, I just tell the basic setup and things, you can change the code according to your requirements.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad because with your views, I will make my next posts more good and helpful.

Jassa

Thanks

September 5, 2023

Category: Angular

1. Firstly friends we need fresh angular 16 setup and for this we need to run below commands but if you already have angular 16 setup then you can avoid below commands. Secondly we should also have latest node version installed on our system:

2. Now friends, here we need to run below commands into our project terminal to install bootstrap(for good looks) and ngx-translate modules into our angular application:

3. Now friends, here we need to add below into our angular.json file to get modules styles and scripts:

4. Now friends we just need to add below code into src/app/app.module.ts file:

5. Now friends inside src/assets folder create ‘i18n’ folder and now inside ‘i18n’ folder, we need to create two files name ‘en.json’ and ‘fr.json’ and we need to add below code inside these files and for better understanding of files and folder, please check below image:

6. Now friends we just need to add below code into src/app/app.component.ts file:

7. Now friends we just need to add below code into src/app/app.component.html file to see the output on browser:

1. Firstly friends we need fresh angular 16 setup and for this we need to run below commands but if you already have angular 16 setup then you can avoid below commands. Secondly we should also have latest node version installed on our system:

2. Now guys we need to add below code inside angulardemo/angular.json files to call bootstrap 5 script and styles:

3. Now guys we need to add below code inside src/app/api/api.component.html file:

4. Now guys we need to add below code inside src/app/api/api.component.ts file:

5. Now guys we need to add below code inside src/app/api/api.component.css file:

6. Now guys we need to add below code inside src/app/models/recipe.interface.ts file:

7. Now guys we need to add below code inside src/app/services/recipe.service.ts file:

8. Now guys we need to add below code inside src/environments/environment.prod.ts file:

9. Now guys please create `fakeDatabase.json` file on the project root and add below demo data inside it:

10. Now guys inside package.json file add below line of code under scripts tag to run json server:

11. Guys in the end we need to add below code inside src/app/app.component.html file

1. Firstly friends we need fresh angular 16 setup and for this we need to run below commands but if you already have angular 16 setup then you can avoid below commands. Secondly we should also have latest node version installed on our system:

2. Now friends, please download js and styles from this git repo link and please put all the js, css files folders in “src/assets/” folder:

3. Now friends we just need to add below code into angulardemo/src/app/app.component.html file to get final out on the web browser:

4. Now guys please add the below code inside angulardemo/angular.json file to styles and scripts:

5. Now friends we just need to add below code into angulardemo/src/app/header/header.component.html file:

6. Now friends we just need to add below code into angulardemo/src/app/footer/footer.component.html file:

7. Now friends we just need to add below code into angulardemo/src/app/home/home.component.html file:

8. Now friends we just need to add below code into angulardemo/src/app/login/login.component.html file:

9. Now friends we just need to add below code into angulardemo/src/app/register/register.component.html file:

10. Now friends we just need to add below code into angulardemo/src/app/app-routing.module.ts file:

11. Now friends we just need to add below code into angulardemo/src/index.html file:

1. Firstly friends we need fresh angular 16 setup and for this we need to run below commands but if you already have angular 16 setup then you can avoid below commands. Secondly we should also have latest node version installed on our system:

2. Now friends, please download images and styles from this git repo link and please put all the images css files folders in “src/assets/” folder after creating css an images folders inside it:

3. Now friends we just need to add below code into angulardemo/src/app/app.component.html file to get final out on the web browser:

4. Now guys please add the below code inside angulardemo/angular.json file to styles and scripts:

5. Now friends we just need to add below code into angulardemo/src/app/header/header.component.html file:

6. Now friends we just need to add below code into angulardemo/src/app/footer/footer.component.html file:

7. Now friends we just need to add below code into angulardemo/src/app/home/home.component.html file:

8. Now friends we just need to add below code into angulardemo/src/app/products/products.component.html file:

9. Now friends we just need to add below code into angulardemo/src/app/singleproduct/singleproduct.component.html file:

10. Now friends we just need to add below code into angulardemo/src/app/store/store.component.html file:

11. Now friends we just need to add below code into angulardemo/src/app/app-routing.module.ts file:

1. Firstly friends we need fresh angular 16 setup and for this we need to run below commands but if you already have angular 16 setup then you can avoid below commands. Secondly we should also have latest node version installed on our system:

2. Now friends, please download images and styles from this git repo link and please put all the images css files folders in “src/assets/” folder after creating css an images folders inside it:

3. Now friends we just need to add below code into angulardemo/src/app/app.component.html file to get final out on the web browser:

4. Now guys please add the below code inside angulardemo/src/index.html file to styles and scripts:

1. Firstly friends we need fresh angular 16 setup and for this we need to run below commands but if you already have angular 16 setup then you can avoid below commands. Secondly we should also have latest node version installed on our system:

2. Now friends we just need to add below code into angulardemo/src/app/app.component.html file to get final out on the web browser:

3. Guys here is git repo link and put css, js and images inside scr/assets folder:

4. Guys please add below code inside scr/index.html file:

5. Guys please add below code inside angukar.json file:

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

3. Now guys we will add below code into our angularform/src/app/app.component.ts file:

4. Now guys we will add below code into our angularform/src/app/app.component.html file for web output:

5. Now guys we will add below code into our angularform/src/app/wordcount.pipe.ts file to create custom pipe functionality:

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

2. Now guys we will add below code into our angularform/src/app/app.module.ts file:

3. Now guys we will add below code into our angularform/src/app/app.component.ts file and main functionality is this:

4. Now guys we will add below code into our angularform/src/app/app.component.html file for web output:

5. Now guys we will add below code into our angularform/src/app/user.service.ts file:

6. Now guys we will add below code into our angularform/angular.json file to call bootstrap scripts:

1. Firstly friends we need fresh angular 16 setup and for this we need to run below commands but if you already have angular 16 setup then you can avoid below commands. Secondly we should also have latest node version installed on our system:

2. Now friends we just need to add below code into angulardemo/src/app/app.component.html file to get final out on the web browser:

3. Guys here is git repo link and put css, js and images inside scr/assets folder:

4. Guys please add below code inside scr/index.html file:

5. Guys please add below code inside angukar.json file:

1. Firstly friends we need fresh angular 16 setup and for this we need to run below commands but if you already have angular 16 setup then you can avoid below commands. Secondly we should also have latest node version installed on our system:

2. Now friends we just need to add below code into angulardemo/src/app/app.component.html file to get final out on the web browser:

3. Guys here is git repo link and put css, js and images inside scr/assets folder:

4. Guys please add below code inside scr/index.html file:

5. Guys please add below code inside angukar.json file: