Hello friends, welcome back to my blog. Today this blog post I will show you Free Angular 20 Real Estate Template – Modern, Responsive & Ready for Deployment.
Key Features:
- Angular 20 Latest Version
- Angular routing
- Angular active routes functionality
- Full responsive
- Toggle sidebar
Angular 20 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 for Angular 20 real estate template, Angular property listing template, real estate website template Angular, responsive angular 20 templates, real estate bootstrap angular template, angular admin dashboard real estate and please use carefully this to avoid the mistakes:
1. Firstly friends we need fresh angular 20 setup and for this we need to run below commands but if you already have angular 20 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
npm install @ionic/angular
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:
GitHub link
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:
<router-outlet></router-outlet>4. Now guys please add the below code inside src/index.html file or angular.json file as well to styles and scripts:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Angular Real Estate</title>
<link rel="shortcut icon" href="favicon.ico" type="image/svg+xml">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<app-root></app-root>
<!--
- custom js link
-->
<script src="./assets/js/script.js"></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>
5. Now friends we just need to add below code into angulardemo/src/app/home/home.html file:
<!--
- #HEADER
-->
<header class="header" data-header>
<div class="overlay" data-overlay></div>
<div class="header-top">
<div class="container">
<ul class="header-top-list">
<li>
<a href="mailto:therichposts@gmail.com" class="header-top-link">
<ion-icon name="mail-outline"></ion-icon>
<span>therichpost.com</span>
</a>
</li>
<li>
<a href="#" class="header-top-link">
<ion-icon name="location-outline"></ion-icon>
<address>15/A, Nest Tower, NYC</address>
</a>
</li>
</ul>
<div class="wrapper">
<ul class="header-top-social-list">
<li>
<a href="#" class="header-top-social-link">
<ion-icon name="logo-facebook"></ion-icon>
</a>
</li>
<li>
<a href="#" class="header-top-social-link">
<ion-icon name="logo-twitter"></ion-icon>
</a>
</li>
<li>
<a href="#" class="header-top-social-link">
<ion-icon name="logo-instagram"></ion-icon>
</a>
</li>
<li>
<a href="#" class="header-top-social-link">
<ion-icon name="logo-pinterest"></ion-icon>
</a>
</li>
</ul>
<button class="header-top-btn">Add Listing</button>
</div>
</div>
</div>
<div class="header-bottom">
<div class="container">
<a href="#" class="logo">
<img src="./assets/images/logo.png" alt="Homeverse logo">
</a>
<nav class="navbar" data-navbar>
<div class="navbar-top">
<a href="#" class="logo">
<img src="./assets/images/logo.png" alt="Homeverse logo">
</a>
<button class="nav-close-btn" data-nav-close-btn aria-label="Close Menu">
<ion-icon name="close-outline"></ion-icon>
</button>
</div>
<div class="navbar-bottom">
<ul class="navbar-list">
<li>
<a href="#home" class="navbar-link" data-nav-link>Home</a>
</li>
<li>
<a href="#about" class="navbar-link" data-nav-link>About</a>
</li>
<li>
<a href="#service" class="navbar-link" data-nav-link>Service</a>
</li>
<li>
<a href="#property" class="navbar-link" data-nav-link>Property</a>
</li>
<li>
<a href="#blog" class="navbar-link" data-nav-link>Blog</a>
</li>
<li>
<a href="#contact" class="navbar-link" data-nav-link>Contact</a>
</li>
</ul>
</div>
</nav>
<div class="header-bottom-actions">
<button class="header-bottom-actions-btn" aria-label="Search">
<ion-icon name="search-outline"></ion-icon>
<span>Search</span>
</button>
<button class="header-bottom-actions-btn" aria-label="Profile">
<ion-icon name="person-outline"></ion-icon>
<span>Profile</span>
</button>
<button class="header-bottom-actions-btn" aria-label="Cart">
<ion-icon name="cart-outline"></ion-icon>
<span>Cart</span>
</button>
<button class="header-bottom-actions-btn" data-nav-open-btn aria-label="Open Menu">
<ion-icon name="menu-outline"></ion-icon>
<span>Menu</span>
</button>
</div>
</div>
</div>
</header>
<main>
<article>
<!--
- #HERO
-->
<section class="hero" id="home">
<div class="container">
<div class="hero-content">
<p class="hero-subtitle">
<ion-icon name="home"></ion-icon>
<span>Real Estate Agency</span>
</p>
<h2 class="h1 hero-title">Find Your Dream House By Us</h2>
<p class="hero-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
</p>
<button class="btn">Make An Enquiry</button>
</div>
<figure class="hero-banner">
<img src="./assets/images/hero-banner.png" alt="Modern house model" class="w-100">
</figure>
</div>
</section>
<!--
- #ABOUT
-->
<section class="about" id="about">
<div class="container">
<figure class="about-banner">
<img src="./assets/images/about-banner-1.png" alt="House interior">
<img src="./assets/images/about-banner-2.jpg" alt="House interior" class="abs-img">
</figure>
<div class="about-content">
<p class="section-subtitle">About Us</p>
<h2 class="h2 section-title">The Leading Real Estate Rental Marketplace.</h2>
<p class="about-text">
Over 39,000 people work for us in more than 70 countries all over the This breadth of global coverage,
combined with
specialist services
</p>
<ul class="about-list">
<li class="about-item">
<div class="about-item-icon">
<ion-icon name="home-outline"></ion-icon>
</div>
<p class="about-item-text">Smart Home Design</p>
</li>
<li class="about-item">
<div class="about-item-icon">
<ion-icon name="leaf-outline"></ion-icon>
</div>
<p class="about-item-text">Beautiful Scene Around</p>
</li>
<li class="about-item">
<div class="about-item-icon">
<ion-icon name="wine-outline"></ion-icon>
</div>
<p class="about-item-text">Exceptional Lifestyle</p>
</li>
<li class="about-item">
<div class="about-item-icon">
<ion-icon name="shield-checkmark-outline"></ion-icon>
</div>
<p class="about-item-text">Complete 24/7 Security</p>
</li>
</ul>
<p class="callout">
"Enimad minim veniam quis nostrud exercitation
llamco laboris. Lorem ipsum dolor sit amet"
</p>
<a href="#service" class="btn">Our Services</a>
</div>
</div>
</section>
<!--
- #SERVICE
-->
<section class="service" id="service">
<div class="container">
<p class="section-subtitle">Our Services</p>
<h2 class="h2 section-title">Our Main Focus</h2>
<ul class="service-list">
<li>
<div class="service-card">
<div class="card-icon">
<img src="./assets/images/service-1.png" alt="Service icon">
</div>
<h3 class="h3 card-title">
<a href="#">Buy a home</a>
</h3>
<p class="card-text">
over 1 million+ homes for sale available on the website, we can match you with a house you will want
to call home.
</p>
<a href="#" class="card-link">
<span>Find A Home</span>
<ion-icon name="arrow-forward-outline"></ion-icon>
</a>
</div>
</li>
<li>
<div class="service-card">
<div class="card-icon">
<img src="./assets/images/service-2.png" alt="Service icon">
</div>
<h3 class="h3 card-title">
<a href="#">Rent a home</a>
</h3>
<p class="card-text">
over 1 million+ homes for sale available on the website, we can match you with a house you will want
to call home.
</p>
<a href="#" class="card-link">
<span>Find A Home</span>
<ion-icon name="arrow-forward-outline"></ion-icon>
</a>
</div>
</li>
<li>
<div class="service-card">
<div class="card-icon">
<img src="./assets/images/service-3.png" alt="Service icon">
</div>
<h3 class="h3 card-title">
<a href="#">Sell a home</a>
</h3>
<p class="card-text">
over 1 million+ homes for sale available on the website, we can match you with a house you will want
to call home.
</p>
<a href="#" class="card-link">
<span>Find A Home</span>
<ion-icon name="arrow-forward-outline"></ion-icon>
</a>
</div>
</li>
</ul>
</div>
</section>
<!--
- #PROPERTY
-->
<section class="property" id="property">
<div class="container">
<p class="section-subtitle">Properties</p>
<h2 class="h2 section-title">Featured Listings</h2>
<ul class="property-list has-scrollbar">
<li>
<div class="property-card">
<figure class="card-banner">
<a href="#">
<img src="./assets/images/property-1.jpg" alt="New Apartment Nice View" class="w-100">
</a>
<div class="card-badge green">For Rent</div>
<div class="banner-actions">
<button class="banner-actions-btn">
<ion-icon name="location"></ion-icon>
<address>Belmont Gardens, Chicago</address>
</button>
<button class="banner-actions-btn">
<ion-icon name="camera"></ion-icon>
<span>4</span>
</button>
<button class="banner-actions-btn">
<ion-icon name="film"></ion-icon>
<span>2</span>
</button>
</div>
</figure>
<div class="card-content">
<div class="card-price">
<strong>$34,900</strong>/Month
</div>
<h3 class="h3 card-title">
<a href="#">New Apartment Nice View</a>
</h3>
<p class="card-text">
Beautiful Huge 1 Family House In Heart Of Westbury. Newly Renovated With New Wood
</p>
<ul class="card-list">
<li class="card-item">
<strong>3</strong>
<ion-icon name="bed-outline"></ion-icon>
<span>Bedrooms</span>
</li>
<li class="card-item">
<strong>2</strong>
<ion-icon name="man-outline"></ion-icon>
<span>Bathrooms</span>
</li>
<li class="card-item">
<strong>3450</strong>
<ion-icon name="square-outline"></ion-icon>
<span>Square Ft</span>
</li>
</ul>
</div>
<div class="card-footer">
<div class="card-author">
<figure class="author-avatar">
<img src="./assets/images/author.jpg" alt="William Seklo" class="w-100">
</figure>
<div>
<p class="author-name">
<a href="#">William Seklo</a>
</p>
<p class="author-title">Estate Agents</p>
</div>
</div>
<div class="card-footer-actions">
<button class="card-footer-actions-btn">
<ion-icon name="resize-outline"></ion-icon>
</button>
<button class="card-footer-actions-btn">
<ion-icon name="heart-outline"></ion-icon>
</button>
<button class="card-footer-actions-btn">
<ion-icon name="add-circle-outline"></ion-icon>
</button>
</div>
</div>
</div>
</li>
<li>
<div class="property-card">
<figure class="card-banner">
<a href="#">
<img src="./assets/images/property-2.jpg" alt="Modern Apartments" class="w-100">
</a>
<div class="card-badge orange">For Sales</div>
<div class="banner-actions">
<button class="banner-actions-btn">
<ion-icon name="location"></ion-icon>
<address>Belmont Gardens, Chicago</address>
</button>
<button class="banner-actions-btn">
<ion-icon name="camera"></ion-icon>
<span>4</span>
</button>
<button class="banner-actions-btn">
<ion-icon name="film"></ion-icon>
<span>2</span>
</button>
</div>
</figure>
<div class="card-content">
<div class="card-price">
<strong>$34,900</strong>/Month
</div>
<h3 class="h3 card-title">
<a href="#">Modern Apartments</a>
</h3>
<p class="card-text">
Beautiful Huge 1 Family House In Heart Of Westbury. Newly Renovated With New Wood
</p>
<ul class="card-list">
<li class="card-item">
<strong>3</strong>
<ion-icon name="bed-outline"></ion-icon>
<span>Bedrooms</span>
</li>
<li class="card-item">
<strong>2</strong>
<ion-icon name="man-outline"></ion-icon>
<span>Bathrooms</span>
</li>
<li class="card-item">
<strong>3450</strong>
<ion-icon name="square-outline"></ion-icon>
<span>Square Ft</span>
</li>
</ul>
</div>
<div class="card-footer">
<div class="card-author">
<figure class="author-avatar">
<img src="./assets/images/author.jpg" alt="William Seklo" class="w-100">
</figure>
<div>
<p class="author-name">
<a href="#">William Seklo</a>
</p>
<p class="author-title">Estate Agents</p>
</div>
</div>
<div class="card-footer-actions">
<button class="card-footer-actions-btn">
<ion-icon name="resize-outline"></ion-icon>
</button>
<button class="card-footer-actions-btn">
<ion-icon name="heart-outline"></ion-icon>
</button>
<button class="card-footer-actions-btn">
<ion-icon name="add-circle-outline"></ion-icon>
</button>
</div>
</div>
</div>
</li>
<li>
<div class="property-card">
<figure class="card-banner">
<a href="#">
<img src="./assets/images/property-3.jpg" alt="Comfortable Apartment" class="w-100">
</a>
<div class="card-badge green">For Rent</div>
<div class="banner-actions">
<button class="banner-actions-btn">
<ion-icon name="location"></ion-icon>
<address>Belmont Gardens, Chicago</address>
</button>
<button class="banner-actions-btn">
<ion-icon name="camera"></ion-icon>
<span>4</span>
</button>
<button class="banner-actions-btn">
<ion-icon name="film"></ion-icon>
<span>2</span>
</button>
</div>
</figure>
<div class="card-content">
<div class="card-price">
<strong>$34,900</strong>/Month
</div>
<h3 class="h3 card-title">
<a href="#">Comfortable Apartment</a>
</h3>
<p class="card-text">
Beautiful Huge 1 Family House In Heart Of Westbury. Newly Renovated With New Wood
</p>
<ul class="card-list">
<li class="card-item">
<strong>3</strong>
<ion-icon name="bed-outline"></ion-icon>
<span>Bedrooms</span>
</li>
<li class="card-item">
<strong>2</strong>
<ion-icon name="man-outline"></ion-icon>
<span>Bathrooms</span>
</li>
<li class="card-item">
<strong>3450</strong>
<ion-icon name="square-outline"></ion-icon>
<span>Square Ft</span>
</li>
</ul>
</div>
<div class="card-footer">
<div class="card-author">
<figure class="author-avatar">
<img src="./assets/images/author.jpg" alt="William Seklo" class="w-100">
</figure>
<div>
<p class="author-name">
<a href="#">William Seklo</a>
</p>
<p class="author-title">Estate Agents</p>
</div>
</div>
<div class="card-footer-actions">
<button class="card-footer-actions-btn">
<ion-icon name="resize-outline"></ion-icon>
</button>
<button class="card-footer-actions-btn">
<ion-icon name="heart-outline"></ion-icon>
</button>
<button class="card-footer-actions-btn">
<ion-icon name="add-circle-outline"></ion-icon>
</button>
</div>
</div>
</div>
</li>
<li>
<div class="property-card">
<figure class="card-banner">
<a href="#">
<img src="./assets/images/property-4.png" alt="Luxury villa in Rego Park" class="w-100">
</a>
<div class="card-badge green">For Rent</div>
<div class="banner-actions">
<button class="banner-actions-btn">
<ion-icon name="location"></ion-icon>
<address>Belmont Gardens, Chicago</address>
</button>
<button class="banner-actions-btn">
<ion-icon name="camera"></ion-icon>
<span>4</span>
</button>
<button class="banner-actions-btn">
<ion-icon name="film"></ion-icon>
<span>2</span>
</button>
</div>
</figure>
<div class="card-content">
<div class="card-price">
<strong>$34,900</strong>/Month
</div>
<h3 class="h3 card-title">
<a href="#">Luxury villa in Rego Park</a>
</h3>
<p class="card-text">
Beautiful Huge 1 Family House In Heart Of Westbury. Newly Renovated With New Wood
</p>
<ul class="card-list">
<li class="card-item">
<strong>3</strong>
<ion-icon name="bed-outline"></ion-icon>
<span>Bedrooms</span>
</li>
<li class="card-item">
<strong>2</strong>
<ion-icon name="man-outline"></ion-icon>
<span>Bathrooms</span>
</li>
<li class="card-item">
<strong>3450</strong>
<ion-icon name="square-outline"></ion-icon>
<span>Square Ft</span>
</li>
</ul>
</div>
<div class="card-footer">
<div class="card-author">
<figure class="author-avatar">
<img src="./assets/images/author.jpg" alt="William Seklo" class="w-100">
</figure>
<div>
<p class="author-name">
<a href="#">William Seklo</a>
</p>
<p class="author-title">Estate Agents</p>
</div>
</div>
<div class="card-footer-actions">
<button class="card-footer-actions-btn">
<ion-icon name="resize-outline"></ion-icon>
</button>
<button class="card-footer-actions-btn">
<ion-icon name="heart-outline"></ion-icon>
</button>
<button class="card-footer-actions-btn">
<ion-icon name="add-circle-outline"></ion-icon>
</button>
</div>
</div>
</div>
</li>
</ul>
</div>
</section>
<!--
- #FEATURES
-->
<section class="features">
<div class="container">
<p class="section-subtitle">Our Aminities</p>
<h2 class="h2 section-title">Building Aminities</h2>
<ul class="features-list">
<li>
<a href="#" class="features-card">
<div class="card-icon">
<ion-icon name="car-sport-outline"></ion-icon>
</div>
<h3 class="card-title">Parking Space</h3>
<div class="card-btn">
<ion-icon name="arrow-forward-outline"></ion-icon>
</div>
</a>
</li>
<li>
<a href="#" class="features-card">
<div class="card-icon">
<ion-icon name="water-outline"></ion-icon>
</div>
<h3 class="card-title">Swimming Pool</h3>
<div class="card-btn">
<ion-icon name="arrow-forward-outline"></ion-icon>
</div>
</a>
</li>
<li>
<a href="#" class="features-card">
<div class="card-icon">
<ion-icon name="shield-checkmark-outline"></ion-icon>
</div>
<h3 class="card-title">Private Security</h3>
<div class="card-btn">
<ion-icon name="arrow-forward-outline"></ion-icon>
</div>
</a>
</li>
<li>
<a href="#" class="features-card">
<div class="card-icon">
<ion-icon name="fitness-outline"></ion-icon>
</div>
<h3 class="card-title">Medical Center</h3>
<div class="card-btn">
<ion-icon name="arrow-forward-outline"></ion-icon>
</div>
</a>
</li>
<li>
<a href="#" class="features-card">
<div class="card-icon">
<ion-icon name="library-outline"></ion-icon>
</div>
<h3 class="card-title">Library Area</h3>
<div class="card-btn">
<ion-icon name="arrow-forward-outline"></ion-icon>
</div>
</a>
</li>
<li>
<a href="#" class="features-card">
<div class="card-icon">
<ion-icon name="bed-outline"></ion-icon>
</div>
<h3 class="card-title">King Size Beds</h3>
<div class="card-btn">
<ion-icon name="arrow-forward-outline"></ion-icon>
</div>
</a>
</li>
<li>
<a href="#" class="features-card">
<div class="card-icon">
<ion-icon name="home-outline"></ion-icon>
</div>
<h3 class="card-title">Smart Homes</h3>
<div class="card-btn">
<ion-icon name="arrow-forward-outline"></ion-icon>
</div>
</a>
</li>
<li>
<a href="#" class="features-card">
<div class="card-icon">
<ion-icon name="football-outline"></ion-icon>
</div>
<h3 class="card-title">Kid’s Playland</h3>
<div class="card-btn">
<ion-icon name="arrow-forward-outline"></ion-icon>
</div>
</a>
</li>
</ul>
</div>
</section>
<!--
- #BLOG
-->
<section class="blog" id="blog">
<div class="container">
<p class="section-subtitle">News & Blogs</p>
<h2 class="h2 section-title">Leatest News Feeds</h2>
<ul class="blog-list has-scrollbar">
<li>
<div class="blog-card">
<figure class="card-banner">
<img src="./assets/images/blog-1.png" alt="The Most Inspiring Interior Design Of 2021" class="w-100">
</figure>
<div class="blog-content">
<div class="blog-content-top">
<ul class="card-meta-list">
<li>
<a href="#" class="card-meta-link">
<ion-icon name="person"></ion-icon>
<span>by: Admin</span>
</a>
</li>
<li>
<a href="#" class="card-meta-link">
<ion-icon name="pricetags"></ion-icon>
<span>Interior</span>
</a>
</li>
</ul>
<h3 class="h3 blog-title">
<a href="#">The Most Inspiring Interior Design Of 2021</a>
</h3>
</div>
<div class="blog-content-bottom">
<div class="publish-date">
<ion-icon name="calendar"></ion-icon>
<time datetime="2022-27-04">Apr 27, 2022</time>
</div>
<a href="#" class="read-more-btn">Read More</a>
</div>
</div>
</div>
</li>
<li>
<div class="blog-card">
<figure class="card-banner">
<img src="./assets/images/blog-2.jpg" alt="Recent Commercial Real Estate Transactions" class="w-100">
</figure>
<div class="blog-content">
<div class="blog-content-top">
<ul class="card-meta-list">
<li>
<a href="#" class="card-meta-link">
<ion-icon name="person"></ion-icon>
<span>by: Admin</span>
</a>
</li>
<li>
<a href="#" class="card-meta-link">
<ion-icon name="pricetags"></ion-icon>
<span>Estate</span>
</a>
</li>
</ul>
<h3 class="h3 blog-title">
<a href="#">Recent Commercial Real Estate Transactions</a>
</h3>
</div>
<div class="blog-content-bottom">
<div class="publish-date">
<ion-icon name="calendar"></ion-icon>
<time datetime="2022-27-04">Apr 27, 2022</time>
</div>
<a href="#" class="read-more-btn">Read More</a>
</div>
</div>
</div>
</li>
<li>
<div class="blog-card">
<figure class="card-banner">
<img src="./assets/images/blog-3.jpg" alt="Renovating a Living Room? Experts Share Their Secrets"
class="w-100">
</figure>
<div class="blog-content">
<div class="blog-content-top">
<ul class="card-meta-list">
<li>
<a href="#" class="card-meta-link">
<ion-icon name="person"></ion-icon>
<span>by: Admin</span>
</a>
</li>
<li>
<a href="#" class="card-meta-link">
<ion-icon name="pricetags"></ion-icon>
<span>Room</span>
</a>
</li>
</ul>
<h3 class="h3 blog-title">
<a href="#">Renovating a Living Room? Experts Share Their Secrets</a>
</h3>
</div>
<div class="blog-content-bottom">
<div class="publish-date">
<ion-icon name="calendar"></ion-icon>
<time datetime="2022-27-04">Apr 27, 2022</time>
</div>
<a href="#" class="read-more-btn">Read More</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</section>
<!--
- #CTA
-->
<section class="cta">
<div class="container">
<div class="cta-card">
<div class="card-content">
<h2 class="h2 card-title">Looking for a dream home?</h2>
<p class="card-text">We can help you realize your dream of a new home</p>
</div>
<button class="btn cta-btn">
<span>Explore Properties</span>
<ion-icon name="arrow-forward-outline"></ion-icon>
</button>
</div>
</div>
</section>
</article>
</main>
<!--
- #FOOTER
-->
<footer class="footer">
<div class="footer-top">
<div class="container">
<div class="footer-brand">
<a href="#" class="logo">
<img src="./assets/images/logo-light.png" alt="Homeverse logo">
</a>
<p class="section-text">
Lorem Ipsum is simply dummy text of the and typesetting industry. Lorem Ipsum is dummy text of the printing.
</p>
<ul class="contact-list">
<li>
<a href="#" class="contact-link">
<ion-icon name="location-outline"></ion-icon>
<address>Brooklyn, New York, United States</address>
</a>
</li>
<li>
<a href="tel:+0123456789" class="contact-link">
<ion-icon name="call-outline"></ion-icon>
<span>+0123-456789</span>
</a>
</li>
<li>
<a href="mailto:therichposts@gmail.com" class="contact-link">
<ion-icon name="mail-outline"></ion-icon>
<span>therichpost.com</span>
</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-linkedin"></ion-icon>
</a>
</li>
<li>
<a href="#" class="social-link">
<ion-icon name="logo-youtube"></ion-icon>
</a>
</li>
</ul>
</div>
<div class="footer-link-box">
<ul class="footer-list">
<li>
<p class="footer-list-title">Company</p>
</li>
<li>
<a href="#" class="footer-link">About</a>
</li>
<li>
<a href="#" class="footer-link">Blog</a>
</li>
<li>
<a href="#" class="footer-link">All Products</a>
</li>
<li>
<a href="#" class="footer-link">Locations Map</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">Order tracking</a>
</li>
<li>
<a href="#" class="footer-link">Wish List</a>
</li>
<li>
<a href="#" class="footer-link">Login</a>
</li>
<li>
<a href="#" class="footer-link">My account</a>
</li>
<li>
<a href="#" class="footer-link">Terms & Conditions</a>
</li>
<li>
<a href="#" class="footer-link">Promotional Offers</a>
</li>
</ul>
<ul class="footer-list">
<li>
<p class="footer-list-title">Customer Care</p>
</li>
<li>
<a href="#" class="footer-link">Login</a>
</li>
<li>
<a href="#" class="footer-link">My account</a>
</li>
<li>
<a href="#" class="footer-link">Wish List</a>
</li>
<li>
<a href="#" class="footer-link">Order tracking</a>
</li>
<li>
<a href="#" class="footer-link">FAQ</a>
</li>
<li>
<a href="#" class="footer-link">Contact us</a>
</li>
</ul>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<p class="copyright">
© 2025 <a href="#">Jassa</a>. All Rights Reserved
</p>
</div>
</div>
</footer>6. Now friends we need to add below inside src/app/app.ts file to add ions icons:
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { Header } from './header/header'
import { IonicModule } from '@ionic/angular';
@Component({
selector: 'app-root',
imports: [RouterOutlet, Header, IonicModule],
templateUrl: './app.html',
styleUrl: './app.css'
})
export class App {
protected title = 'angular20blog';
}
7. Now friends we just need to add below code into angulardemo/src/app/app-routes.ts file:
import { Routes } from '@angular/router';
import { Home } from './home/home';
export const routes: Routes = [
{
path: '', title: 'Home Page', component: Home,
},
];
Friends in the end must run ng serve command into your terminal to run the angular 20 ecommerce project (localhost:4200).
Guys click here to check the Angular 20 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