Hello friends, welcome back to my blog. Today this blog post I will show you Angular 20 for Beginners: Building a Simple Blog App.
Key Features:
- Angular 20 Latest Version
- Angular routing
- Angular active routes functionality
- Full responsive
- Toggle sidebar
- Bootstrap 5
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 landing page, Contentful CMS, headless CMS Angular, build landing page angular, angular 2025 frontend, responsive landing page angular, angular Contentful integration, angular content management, headless architecture angular, angular 20 SEO tutorial, landing page with CMS 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
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>Alif | Bootstrap Template</title>
<!--====== Favicon Icon ======-->
<link
rel="shortcut icon"
href="assets/images/favicon.svg"
type="image/svg"
/>
<!-- ===== All CSS files ===== -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
<link rel="stylesheet" href="assets/css/animate.css" />
<link rel="stylesheet" href="assets/css/glightbox.min.css" />
<link rel="stylesheet" href="assets/css/lineicons.css" />
<link rel="stylesheet" href="assets/css/styles.css" />
</head>
<body>
<app-root></app-root>
<!-- ====== All Javascript Files ====== -->
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/glightbox.min.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>
5. Now friends we just need to add below code into angulardemo/src/app/home/home.html file:
<!-- ====== Header Start ====== -->
<app-header></app-header>
<!-- ====== Hero Start ====== -->
<section class="hero" id="home">
<div class="container">
<div class="row align-items-center">
<div class="col-md-10 col-lg-6 col-xl-6">
<div class="hero-content wow fadeInUp" data-wow-delay=".2s">
<h1 class="hero-title">Alif - Bootstrap 5 Business Template</h1>
<p class="hero-desc">
Quibusdam beatae quia alias aperiam molestias est suscipit
ducimus atque hic a tempore magnam eaque libero.
</p>
<a href="javascript:void(0)" class="main-btn">Get Started</a>
</div>
</div>
<div class="col-lg-6 col-xl-6">
<div class="hero-image wow fadeInUp" data-wow-delay=".25s">
<div class="video-btn-wrapper">
<a href="javascript:void(0)" class="video-btn glightbox">
<i class="lni lni-play"></i>
</a>
</div>
<img
src="assets/images/hero/hero-image.jpg"
alt="hero-image"
class="image"
/>
</div>
</div>
</div>
</div>
</section>
<!-- ====== Hero End ====== -->
<!-- ====== Features Start ====== -->
<section id="features" class="features">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="section-title mx-auto text-center">
<span>Features</span>
<h2>Our Awesome Features</h2>
<p>
There are many variations of passages of Lorem Ipsum available
but the majority have suffered alteration in some form.
</p>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-xl-4 col-md-6 col-sm-9">
<div class="single-feature wow fadeInUp" data-wow-delay=".1s">
<div class="feature-icon">
<i class="lni lni-hand"></i>
</div>
<div class="feature-content">
<h3 class="feature-title">Easy to use</h3>
<p class="feature-desc">
Lorem Ipsum is simply dummy text of the printing and industry.
</p>
</div>
</div>
</div>
<div class="col-xl-4 col-md-6 col-sm-9">
<div class="single-feature wow fadeInUp" data-wow-delay=".15s">
<div class="feature-icon">
<i class="lni lni-lock"></i>
</div>
<div class="feature-content">
<h3 class="feature-title">Highly secured</h3>
<p class="feature-desc">
Lorem Ipsum is simply dummy text of the printing and industry.
</p>
</div>
</div>
</div>
<div class="col-xl-4 col-md-6 col-sm-9">
<div class="single-feature wow fadeInUp" data-wow-delay=".2s">
<div class="feature-icon">
<i class="lni lni-layout"></i>
</div>
<div class="feature-content">
<h3 class="feature-title">High-quality Design</h3>
<p class="feature-desc">
Lorem Ipsum is simply dummy text of the printing and industry.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ====== Features End ====== -->
<!-- ====== About Start ====== -->
<section id="about" class="about">
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="about-content">
<div class="section-title">
<span>About Us</span>
<h2>Brilliant Toolkit to Build Nextgen Website Faster.</h2>
</div>
<p>
The main ‘thrust’ is to focus on educating attendees on how to
best protect highly vulnerable business applications with
interactive panel discussions and roundtables led by subject
matter experts.
</p>
<p>
The main ‘thrust’ is to focus on educating attendees on how to
best protect highly vulnerable business applications with
interactive panel.
</p>
<a href="javascript:void(0)" class="main-btn">Learn More</a>
</div>
</div>
<div class="col-lg-6">
<div class="about-image-wrapper">
<div class="about-image text-center text-lg-end">
<img
src="assets/images/about/about-image.jpg"
alt="about"
class="image"
/>
<img
src="assets/images/about/dotted-shape.svg"
alt="shape"
class="shape shape-1"
/>
<img
src="assets/images/about/dotted-shape.svg"
alt="shape"
class="shape shape-2"
/>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ====== About End ====== -->
<!-- ====== Services Start ====== -->
<section id="services" class="features">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="section-title mx-auto text-center">
<span>Services</span>
<h2>Main Services of Alif</h2>
<p>
There are many variations of passages of Lorem Ipsum available
but the majority have suffered alteration in some form.
</p>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-xl-4 col-md-6 col-sm-9">
<div class="single-feature wow fadeInUp" data-wow-delay=".1s">
<div class="feature-icon">
<i class="lni lni-capsule"></i>
</div>
<div class="feature-content">
<h3 class="feature-title">Refreshing Design</h3>
<p class="feature-desc">
Lorem Ipsum is simply dummy text of the printing and industry.
</p>
</div>
</div>
</div>
<div class="col-xl-4 col-md-6 col-sm-9">
<div class="single-feature wow fadeInUp" data-wow-delay=".15s">
<div class="feature-icon">
<i class="lni lni-bootstrap"></i>
</div>
<div class="feature-content">
<h3 class="feature-title">Solid Bootstrap 5</h3>
<p class="feature-desc">
Lorem Ipsum is simply dummy text of the printing and industry.
</p>
</div>
</div>
</div>
<div class="col-xl-4 col-md-6 col-sm-9">
<div class="single-feature wow fadeInUp" data-wow-delay=".2s">
<div class="feature-icon">
<i class="lni lni-layout"></i>
</div>
<div class="feature-content">
<h3 class="feature-title">Fully Responsive</h3>
<p class="feature-desc">
Lorem Ipsum is simply dummy text of the printing and industry.
</p>
</div>
</div>
</div>
<div class="col-xl-4 col-md-6 col-sm-9">
<div class="single-feature wow fadeInUp" data-wow-delay=".1s">
<div class="feature-icon">
<i class="lni lni-dashboard"></i>
</div>
<div class="feature-content">
<h3 class="feature-title">Speed Optimized</h3>
<p class="feature-desc">
Lorem Ipsum is simply dummy text of the printing and industry.
</p>
</div>
</div>
</div>
<div class="col-xl-4 col-md-6 col-sm-9">
<div class="single-feature wow fadeInUp" data-wow-delay=".15s">
<div class="feature-icon">
<i class="lni lni-layers"></i>
</div>
<div class="feature-content">
<h3 class="feature-title">Fully Customizable</h3>
<p class="feature-desc">
Lorem Ipsum is simply dummy text of the printing and industry.
</p>
</div>
</div>
</div>
<div class="col-xl-4 col-md-6 col-sm-9">
<div class="single-feature wow fadeInUp" data-wow-delay=".2s">
<div class="feature-icon">
<i class="lni lni-reload"></i>
</div>
<div class="feature-content">
<h3 class="feature-title">Regular Updates</h3>
<p class="feature-desc">
Lorem Ipsum is simply dummy text of the printing and industry.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ====== Services End ====== -->
<!-- ====== Testimonial Start ====== -->
<section id="testimonial" class="testimonials">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="section-title mx-auto text-center">
<span>Testimonial</span>
<h2>Our Customers Says</h2>
<p>
There are many variations of passages of Lorem Ipsum available
but the majority have suffered alteration in some form.
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="single-testimonial">
<div class="testimonial-content">
<p>
We Crafted an awesome design library matter you're buildi
business presentation websit or a complex web application our
design blocks can easily.
</p>
</div>
<div class="testimonial-info">
<h4>Margin Gesmu</h4>
<p>Founder Jassa</p>
</div>
<div class="testimonial-quote">
<i class="lni lni-quotation"></i>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="single-testimonial">
<div class="testimonial-content">
<p>
We Crafted an awesome design library matter you're buildi
business presentation websit or a complex web application our
design blocks can easily.
</p>
</div>
<div class="testimonial-info">
<h4>John Doe</h4>
<p>Founder Ajooni</p>
</div>
<div class="testimonial-quote">
<i class="lni lni-quotation"></i>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="single-testimonial">
<div class="testimonial-content">
<p>
We Crafted an awesome design library matter you're buildi
business presentation websit or a complex web application our
design blocks can easily.
</p>
</div>
<div class="testimonial-info">
<h4>Jonathon Smith</h4>
<p>Founder Alisha</p>
</div>
<div class="testimonial-quote">
<i class="lni lni-quotation"></i>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ====== Testimonial End ====== -->
<!-- ====== Pricing Start ====== -->
<section id="pricing" class="pricing">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="section-title mx-auto text-center">
<span>Pricing</span>
<h2>Our Pricing Plans</h2>
<p>
There are many variations of passages of Lorem Ipsum available
but the majority have suffered alteration in some form.
</p>
</div>
</div>
</div>
<div class="row align-items-center justify-content-center">
<div class="col-lg-4 col-md-6 col-sm-10">
<div
class="single-pricing first-item wow fadeInUp"
data-wow-delay=".15s"
>
<div class="pricing-header">
<h3>STARTING FROM</h3>
<h4>$ 19.99/mo</h4>
</div>
<div class="pricing-body">
<ul>
<li>5 User</li>
<li>All UI components</li>
<li>Lifetime access</li>
<li>Free updates</li>
<li>Use on 1 (one) project</li>
<li>4 Months support</li>
</ul>
</div>
<div class="pricing-footer">
<a href="javascript:void(0)" class="main-btn border-btn">
Purchase Now
</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-10">
<div
class="single-pricing active wow fadeInUp"
data-wow-delay=".1s"
>
<div class="pricing-header">
<h3>STARTING FROM</h3>
<h4>$ 30.99/mo</h4>
</div>
<div class="pricing-body">
<ul>
<li>5 User</li>
<li>All UI components</li>
<li>Lifetime access</li>
<li>Free updates</li>
<li>Use on 1 (one) project</li>
<li>4 Months support</li>
</ul>
</div>
<div class="pricing-footer">
<a href="javascript:void(0)" class="main-btn"> Purchase Now </a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-10">
<div
class="single-pricing last-item wow fadeInUp"
data-wow-delay=".15s"
>
<div class="pricing-header">
<h3>STARTING FROM</h3>
<h4>$ 70.99/mo</h4>
</div>
<div class="pricing-body">
<ul>
<li>5 User</li>
<li>All UI components</li>
<li>Lifetime access</li>
<li>Free updates</li>
<li>Use on 1 (one) project</li>
<li>4 Months support</li>
</ul>
</div>
<div class="pricing-footer">
<a href="javascript:void(0)" class="main-btn border-btn">
Purchase Now
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ====== Pricing End ====== -->
<!-- ====== FAQ Start ====== -->
<section id="faq" class="faq">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="section-title text-center mx-auto">
<span>FAQ</span>
<h2>Any Questions? Answered</h2>
<p>
There are many variations of passages of Lorem Ipsum available
but the majority have suffered alteration in some form.
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="single-faq wow fadeInUp" data-wow-delay=".1s">
<div class="faq-icon">
<i class="lni lni-question-circle"></i>
</div>
<div class="faq-content">
<h4>How to use UIdeck?</h4>
<p>
Alif has been the industry's standard when an printer took a
galley of type and scrambled it to make a type specimen book.
</p>
</div>
</div>
<div class="single-faq wow fadeInUp" data-wow-delay=".15s">
<div class="faq-icon">
<i class="lni lni-question-circle"></i>
</div>
<div class="faq-content">
<h4>How to use UIdeck?</h4>
<p>
Alif has been the industry's standard when an printer took a
galley of type and scrambled it to make a type specimen book.
</p>
</div>
</div>
<div class="single-faq wow fadeInUp" data-wow-delay=".2s">
<div class="faq-icon">
<i class="lni lni-question-circle"></i>
</div>
<div class="faq-content">
<h4>How to use UIdeck?</h4>
<p>
Alif has been the industry's standard when an printer took a
galley of type and scrambled it to make a type specimen book.
</p>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="single-faq wow fadeInUp" data-wow-delay=".1s">
<div class="faq-icon">
<i class="lni lni-question-circle"></i>
</div>
<div class="faq-content">
<h4>How to use UIdeck?</h4>
<p>
Alif has been the industry's standard when an printer took a
galley of type and scrambled it to make a type specimen book.
</p>
</div>
</div>
<div class="single-faq wow fadeInUp" data-wow-delay=".15s">
<div class="faq-icon">
<i class="lni lni-question-circle"></i>
</div>
<div class="faq-content">
<h4>How to use UIdeck?</h4>
<p>
Alif has been the industry's standard when an printer took a
galley of type and scrambled it to make a type specimen book.
</p>
</div>
</div>
<div class="single-faq wow fadeInUp" data-wow-delay=".2s">
<div class="faq-icon">
<i class="lni lni-question-circle"></i>
</div>
<div class="faq-content">
<h4>How to use UIdeck?</h4>
<p>
Alif has been the industry's standard when an printer took a
galley of type and scrambled it to make a type specimen book.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ====== FAQ End ====== -->
<!-- ====== Team Start ====== -->
<section id="team" class="team">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="section-title mx-auto text-center">
<span>Our Team</span>
<h2>Meet The Team</h2>
<p>
There are many variations of passages of Lorem Ipsum available
but the majority have suffered alteration in some form.
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-3 col-lg-3 col-sm-6">
<div class="single-team wow fadeInUp" data-wow-delay=".1s">
<div class="team-image-wrapper">
<div class="team-image">
<img src="assets/images/team/team-01.png" alt="team" />
</div>
</div>
<div class="team-info">
<h5>Adveen Desuza</h5>
<h6>UI Designer</h6>
</div>
<ul class="team-socials">
<li>
<a href="javascript:void(0)">
<i class="lni lni-facebook-filled"></i>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="lni lni-twitter-filled"></i>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="lni lni-instagram-filled"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="col-xl-3 col-lg-3 col-sm-6">
<div class="single-team wow fadeInUp" data-wow-delay=".15s">
<div class="team-image-wrapper">
<div class="team-image">
<img src="assets/images/team/team-02.png" alt="team" />
</div>
</div>
<div class="team-info">
<h5>Jezmin uniya</h5>
<h6>Product Designer</h6>
</div>
<ul class="team-socials">
<li>
<a href="javascript:void(0)">
<i class="lni lni-facebook-filled"></i>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="lni lni-twitter-filled"></i>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="lni lni-instagram-filled"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="col-xl-3 col-lg-3 col-sm-6">
<div class="single-team wow fadeInUp" data-wow-delay=".2s">
<div class="team-image-wrapper">
<div class="team-image">
<img src="assets/images/team/team-03.png" alt="team" />
</div>
</div>
<div class="team-info">
<h5>Andrieo Gloree</h5>
<h6>App Developer</h6>
</div>
<ul class="team-socials">
<li>
<a href="javascript:void(0)">
<i class="lni lni-facebook-filled"></i>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="lni lni-twitter-filled"></i>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="lni lni-instagram-filled"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="col-xl-3 col-lg-3 col-sm-6">
<div class="single-team wow fadeInUp" data-wow-delay=".25s">
<div class="team-image-wrapper">
<div class="team-image">
<img src="assets/images/team/team-04.png" alt="team" />
</div>
</div>
<div class="team-info">
<h5>Jackie Sanders</h5>
<h6>Content Writer</h6>
</div>
<ul class="team-socials">
<li>
<a href="javascript:void(0)">
<i class="lni lni-facebook-filled"></i>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="lni lni-twitter-filled"></i>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="lni lni-instagram-filled"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- ====== Team End ====== -->
<!-- ====== Blog Start ====== -->
<section id="blog" class="blog">
<div class="container">
<div class="row align-items-center">
<div class="col-md-8">
<div class="section-title">
<span>Blog</span>
<h2>Latest Blog Post</h2>
<p>
There are many variations of passages of Lorem Ipsum available
but the majority have suffered alteration in some form.
</p>
</div>
</div>
<div class="col-md-4">
<div class="all-post-btn text-md-end">
<a href="javascript:void(0)" class="main-btn">See All Posts</a>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="single-blog">
<div class="blog-image">
<a href="javascript:void(0)">
<img src="assets/images/blog/blog-01.jpg" alt="blog" />
</a>
<span class="blog-tag"> Design </span>
</div>
<div class="blog-content">
<h3>
<a href="javascript:void(0)">
How to earn more money as a wellness coach
</a>
</h3>
<p>
Lorem Ipsum is simply dummy text of the printing and
typesetting industry.
</p>
<a href="javascrit:void(0)" class="main-btn"> Read More </a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="single-blog">
<div class="blog-image">
<a href="javascript:void(0)">
<img src="assets/images/blog/blog-02.jpg" alt="blog" />
</a>
<span class="blog-tag"> Development </span>
</div>
<div class="blog-content">
<h3>
<a href="javascript:void(0)">
How to earn more money as a wellness coach
</a>
</h3>
<p>
Lorem Ipsum is simply dummy text of the printing and
typesetting industry.
</p>
<a href="javascrit:void(0)" class="main-btn"> Read More </a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="single-blog">
<div class="blog-image">
<a href="javascript:void(0)">
<img src="assets/images/blog/blog-03.jpg" alt="blog" />
</a>
<span class="blog-tag"> Research </span>
</div>
<div class="blog-content">
<h3>
<a href="javascript:void(0)">
How to earn more money as a wellness coach
</a>
</h3>
<p>
Lorem Ipsum is simply dummy text of the printing and
typesetting industry.
</p>
<a href="javascrit:void(0)" class="main-btn"> Read More </a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ====== Blog End ====== -->
<!-- ====== Contact Start ====== -->
<section id="contact" class="contact">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="section-title">
<span>CONTACT US</span>
<h2>
Ready to Get Started? <br />
Let's Go
</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-6 col-lg-7">
<div class="row">
<div class="col-md-6 col-lg-12">
<div class="single-contact-info">
<div class="contact-icon">
<i class="lni lni-phone"></i>
</div>
<div class="contact-meta">
<h5>Contact</h5>
<p>0123456789</p>
<p>admin@example.com</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-12">
<div class="single-contact-info">
<div class="contact-icon">
<i class="lni lni-phone"></i>
</div>
<div class="contact-meta">
<h5>Address</h5>
<p>175 5th Ave, New York, NY 10010 United States</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-5">
<div class="contact-form-wrapper wow fadeInUp" data-wow-delay=".2s">
<h3 class="contact-form-title">Send us a Message</h3>
<form class="contact-form">
<div class="form-group">
<label for="fullName">Full Name*</label>
<input
type="text"
name="fullName"
placeholder="Jassa"
/>
</div>
<div class="form-group">
<label for="email">Email*</label>
<input
type="email"
name="email"
placeholder="example@yourmail.com"
/>
</div>
<div class="form-group">
<label for="subject">Subject*</label>
<input type="text" name="subject" placeholder="Subject" />
</div>
<div class="form-group">
<label for="message">Message*</label>
<textarea
name="message"
rows="1"
placeholder="Type your message here"
></textarea>
</div>
<div class="form-group mb-0">
<button type="submit" class="main-btn">Send Message</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="map-container">
<object
style="border: 0; height: 450px; width: 100%"
data="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3102.7887109309127!2d-77.44196278417968!3d38.95165507956235!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMzjCsDU3JzA2LjAiTiA3N8KwMjYnMjMuMiJX!5e0!3m2!1sen!2sbd!4v1545420879707"
></object>
</div>
</section>
<!-- ====== Contact End ====== -->
<!-- ====== Footer Start ====== -->
<footer class="footer wow fadeInUp" data-wow-delay=".15s">
<div class="footer-widgets">
<div class="container">
<div class="row">
<div class="col-xl-4 col-lg-4 col-md-6">
<div class="widget">
<a href="index.html" class="footer-logo">
<img src="assets/images/logo/logo.svg" alt="logo" />
</a>
<p class="widget-desc">
We create digital experiences for brands and companies by
using technology.
</p>
<ul class="widget-socials">
<li>
<a href="javascript:void(0)">
<i class="lni lni-facebook-filled"></i>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="lni lni-twitter-filled"></i>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="lni lni-instagram-filled"></i>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="lni lni-linkedin-original"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="col-xl-2 col-lg-2 col-md-6 col-sm-6">
<div class="widget">
<h5 class="widget-title">About Us</h5>
<ul class="widget-links">
<li>
<a href="javascript:void(0)">Home</a>
</li>
<li>
<a href="javascript:void(0)">Features</a>
</li>
<li>
<a href="javascript:void(0)">About</a>
</li>
<li>
<a href="javascript:void(0)">Testimonial</a>
</li>
</ul>
</div>
</div>
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6">
<div class="widget">
<h5 class="widget-title">Features</h5>
<ul class="widget-links">
<li>
<a href="javascript:void(0)">How it works</a>
</li>
<li>
<a href="javascript:void(0)">Privacy policy</a>
</li>
<li>
<a href="javascript:void(0)">Terms of service</a>
</li>
<li>
<a href="javascript:void(0)">Refund policy</a>
</li>
</ul>
</div>
</div>
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6">
<div class="widget">
<h5 class="widget-title">Our Products</h5>
<ul class="widget-links">
<li>
<a
href="https://therichpost.com/category/woocommerce-hooks/"
rel="nofollow noopner"
target="_blank"
>Woo Hooks
</a>
</li>
<li>
<a
href="https://therichpost.com/category/angular-ecommerce-templates/"
rel="nofollow noopner"
target="_blank"
>Angular Ecommerce</a
>
</li>
<li>
<a
href="https://therichpost.com/category/bootstrap-5/"
rel="nofollow noopner"
target="_blank"
>Bootstrap5 Templates</a
>
</li>
<li>
<a
href="https://therichpost.com/category/free-admin-dashboard-templates/"
rel="nofollow noopner"
target="_blank"
>Free Admin</a
>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- ====== Footer End ====== -->
<!-- ====== Back To Top Start ====== -->
<a href="javascript:void(0)" class="back-to-top">
<i class="lni lni-chevron-up"> </i>
</a>
<!-- ====== Back To Top End ====== -->6. 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