Angular Project: A Step-by-Step Guide to Build First Angular Project

Lesson 12 of 13By Chinmayee Deshpande

Last updated on Jul 26, 2024252478

Tutorial Playlist

Angular Tutorial
Overview
What is Angular?: Architecture, Features, and Advantages
Lesson - 1
Angular Hello World: Creating Your First Angular Application
Lesson - 2
All You Need to Know About Data Binding in Angular
Lesson - 3
What Are Angular Forms and How to Implement Them?
Lesson - 4
A Complete Guide To Angular Routing
Lesson - 5
Introduction to Angular Components and How to Implement Them?
Lesson - 6
What is Bootstrap and How to Embed Bootstrap into Angular?
Lesson - 7
Introduction To Angular Service and Its Features
Lesson - 8
What Is NgSwitch In Angular? How To Implement The NgSwitch Directive?
Lesson - 9
What Are Angular Pipes? How Are They Implemented?
Lesson - 10
How To Implement Angular Dependency Injection: Everything You Need To Know
Lesson - 11
The Ultimate Guide to Creating Your First Angular Project
Lesson - 12
60+ Top Angular Interview Questions With Answers for 2025
Lesson - 13

Table of Contents

View More

Angular is a widely used JavaScript framework for front-end development. In this article on the Angular project, we’re building an Admin dashboard using Angular 10. Before you go ahead with application building, make sure you are familiar with Angular's core concepts. You could check out articles on various topics like Angular Components, Routing, Services, Bootstrap, and more.

In the coming sections, we will create an admin dashboard using Angular. Please note that we are using a bootstrap template and making modifications to suit my requirements.

What is Bootstrap?

Originally created by Twitter, Bootstrap is a powerful toolkit comprising a collection of tools including HTML, JavaScript, and CSS tools for creation and building of responsive web pages and web applications. Bootstrap is free and open-source, and is hosted on GitHub.

To put it more simply, Bootstrap can be termed as a large collection of handy and reusable, bits of code written in CSS, JavaScript, and/or HTML. It also acts as a front-end development framework enabling designers and developers to build fully responsive websites fast.

What is Routing?

In Angular, routing plays a crucial role in creating Single Page Applications. . These applications are loaded once, and the new content is subsequently added, dynamically. Some common Single Page Applications include Google, Twitter, Facebook, and Gmail. The best advantage of Single Page Applications, or SPAs is the excellent user experience that they provide since there is no wait for pages to load. This by extension, makes the SPA fast and gives the application a near-desktop feel.

It generally specifies navigation with a forward slash followed by the path defining the new content.

Angular_Routing

A Step-By-Step Guide to Creating Your First Angular Project

Step 1

Create a folder for your application in the desired location on your system and open it on VSCode. Open a new terminal and type in the following command to create your app folder.

ng new <project_name>

ng-create

When the command is run, Angular creates a skeleton application under the folder. It also includes a bunch of files and other important necessities for the application.

Step 2

To run the application, change the directory to the folder created, and use the ng command.

cd <project_name>

ng serve

Once run, open your browser and navigate to localhost:4200. If another application is running on that address, you can simply run the command.
ng serve --port

It will generate a port for you to navigate to. Typically, the browser looks something like this:

app-Angular_Helloworld

Step 3

Install Bootstrap and JQuery into your application. To do that, run the following commands in the terminal.

npm install bootstrap

npm install jquery

Step 4

Add the relative paths to the JavaScript files in the script array of the angular.json file.

"scripts": [

"node_modules/bootstrap/dist/js/bootstrap.min.js",

"node_modules/jquery/dist/jquery.min.js",

"node_modules/jquery-easing/jquery.easing.min.js",

"js/sb-admin-2.min.js",

"vendor/chart.js/Chart.min.js",

"js/demo/chart-area-demo.js",

"js/demo/chart-pie-demo.js",

"node_modules/bootstrap/dist/js/bootstrap.bundle.js"

]

Also, add the CSS file in the styles array of the angular.json file.

"styles": [

"src/styles.css","node_modules/bootstrap/dist/css/bootstrap.min.css" ],

Step 5

Add the following URLs in the index.html file.

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Project</title>

<base href="/">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="icon" type="image/x-icon" href="">

<link href="css/styles.css" rel="stylesheet" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/js/all.min.js" crossorigin="anonymous"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://getbootstrap.com/docs/4.0/dist/js/bootstrap.min.js"></script>

<script src="node_modules/chart.js/Chart.min.js"></script>

<script src="node_modules/angular-chart.js/dist/angular-chart.min.js"></script>

</head>

<body>

<app-root></app-root>

</body>

</html>

Now that the initial setup is done, go ahead and create a component. We have created the navbar components. However, it includes the code for all parts of the UI.

<router-outlet></router-outlet>

<body class="sb-nav-fixed">

<nav class="sb-topnav navbar navbar-expand navbar-dark bg-dark">

<a class="navbar-brand" href="index.html"><img src="assets/Logo.png" width="80%" height="120%" style="padding-top: 10px;"></a>

<button class="btn btn-link btn-sm order-1 order-lg-0" id="sidebarToggle" href="#"><i class="fas fa-bars"></i></button>

<form class="d-none d-md-inline-block form-inline ml-auto mr-0 mr-md-3 my-2 my-md-0">

<div class="input-group">

<input class="form-control" type="text" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2" />

<div class="input-group-append">

<button class="btn btn-primary" type="button"><i class="fas fa-search"></i></button>

</div>

</div>

</form>

<ul class="navbar-nav ml-auto ml-md-0">

<li class="nav-item dropdown">

<a class="nav-link dropdown-toggle" id="userDropdown" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="assets/id.jpg" style="border-radius: 50%;" width="50px" height="50px"></a>

<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">

<a class="dropdown-item" href="#">Settings</a>

<a class="dropdown-item" href="#">Activity Log</a>

<div class="dropdown-divider"></div>

<a class="dropdown-item" href="#" routerLink = "/login" routerLinkActive= "active">Logout</a>

</div>

</li>

</ul>

</nav>

<div id="layoutSidenav">

<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="index.html">

<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-toggle="collapse" data-target="#collapseLayouts" aria-expanded="false" aria-controls="collapseLayouts">

<div class="sb-nav-link-icon"><i class="fas fa-home"></i></div>

Home

<div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>

</a>

<div class="collapse" id="collapseLayouts" aria-labelledby="headingOne" data-parent="#sidenavAccordion">

<nav class="sb-sidenav-menu-nested nav">

<a class="nav-link" href="#" routerLink = "/static">Profile</a>

</nav>

</div>

<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapsePages" aria-expanded="false" aria-controls="collapsePages">

<div class="sb-nav-link-icon"><i class="fas fa-cog"></i></div>

Settings

<div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>

</a>

<div class="collapse" id="collapsePages" aria-labelledby="headingTwo" data-parent="#sidenavAccordion">

<nav class="sb-sidenav-menu-nested nav accordion" id="sidenavAccordionPages">

<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#pagesCollapseAuth" aria-expanded="false" aria-controls="pagesCollapseAuth">

Account Settings

<div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>

</a>

<div class="collapse" id="pagesCollapseAuth" aria-labelledby="headingOne" data-parent="#sidenavAccordionPages">

<nav class="sb-sidenav-menu-nested nav">

<a class="nav-link" href="#" routerLink = "/login" routerLinkActive = "active" >Login</a>

<a class="nav-link" href="#" routerLink = "/register" routerLinkActive = "active" >Register</a>

<a class="nav-link" href="#" routerLink = "/changepassword" routerLinkActive = "active">Change Password</a>

</nav>

</div>

<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#pagesCollapseError" aria-expanded="false" aria-controls="pagesCollapseError">

Activity

<div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>

</a>

<div class="collapse" id="pagesCollapseError" aria-labelledby="headingOne" data-parent="#sidenavAccordionPages">

<nav class="sb-sidenav-menu-nested nav">

<a class="nav-link" href="401.html">401 Page</a>

<a class="nav-link" href="404.html">404 Page</a>

<a class="nav-link" href="500.html">500 Page</a>

</nav>

</div>

</nav>

</div>

<a class="nav-link collapsed" href="#">

<div class="sb-nav-link-icon"><i class="fas fa-business-time"></i></div>

Attendance

</a>

<a class="nav-link collapsed" href="#">

<div class="sb-nav-link-icon"><i class="fas fa-money-check-alt"></i></div>

Payroll

</a>

<a class="nav-link collapsed" href="#">

<div class="sb-nav-link-icon"><i class="fas fa-plane"></i></div>

Travel Expenses

</a>

<a class="nav-link collapsed" href="#">

<div class="sb-nav-link-icon"><i class="fas fa-user-friends"></i></div>

Confirmation

</a>

<a class="nav-link collapsed" href="#">

<div class="sb-nav-link-icon"><i class="fas fa-cloud-download-alt"></i></div>

Downloads

</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">

<h1 class="mt-4">Kate Adams</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">Birthdays</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">My Holidays</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">Company Anouncement</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">Quick Links</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 mr-1"></i>

Weekly Analysis

</div>

<div class="card-body"><img src="assets/Areachart.PNG" width="100%" height="280"></div>

</div>

</div>

<div class="col-xl-6">

<div class="card mb-4">

<div class="card-header">

<i class="fas fa-chart-bar mr-1"></i>

Monthly Report

</div>

<div class="card-body"><img src="assets/barchart.PNG" width="100%" height="280"></div>

</div>

</div>

</div>

<div class="card mb-4">

<div class="card-header">

<i class="fas fa-table mr-1"></i>

Employee Data

</div>

<div class="card-body">

<div class="table-responsive">

<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">

<thead>

<tr>

<th>Name</th>

<th>Position</th>

<th>Office</th>

<th>Age</th>

<th>Start date</th>

<th>Salary</th>

</tr>

</thead>

<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>

</tbody>

</table>

</div>

</div>

</div>

</div>

</main>

<footer class="py-4 bg-light mt-auto">

<div class="container-fluid">

<div class="d-flex align-items-center justify-content-between small">

<div class="text-muted">Copyright © Simplilearn 2021 </div>

<div>

<a href="#">Privacy Policy</a>

·

<a href="#">Terms & Conditions</a>

</div>

</div>

</div>

</footer>

</div>

</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>

<script src="js/scripts.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" crossorigin="anonymous"></script>

<script src="assets/demo/chart-area-demo.js"></script>

<script src="assets/demo/chart-bar-demo.js"></script>

<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js" crossorigin="anonymous"></script>

<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js" crossorigin="anonymous"></script>

<script src="assets/demo/datatables-demo.js"></script>

</body>

Also, add the relevant images in the assets folder to display on the screen. Once you run the application, the browser looks something like this.

Step_5

Step 6

You can now add the routes for the required options. We have created five routes excluding the default route. As a result, we’ve created five components for the same.

For the Profile option under the Home option, we’ve created a component called toggle. The Html code for toggle.html is

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

<meta name="description" content="" />

<meta name="author" content="" />

<title>Static Navigation - SB Admin</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/js/all.min.js" crossorigin="anonymous"></script>

</head>

<body>

<nav class="sb-topnav navbar navbar-expand navbar-dark bg-dark">

<a class="navbar-brand" href="index.html"><img src="assets/Logo.png" width="80%" height="120%" style="padding-top: 10px;"></a>

<button class="btn btn-link btn-sm order-1 order-lg-0" id="sidebarToggle" href="#"><i class="fas fa-bars"></i></button>

<form class="d-none d-md-inline-block form-inline ml-auto mr-0 mr-md-3 my-2 my-md-0">

<div class="input-group">

<input class="form-control" type="text" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2" />

<div class="input-group-append">

<button class="btn btn-primary" type="button"><i class="fas fa-search"></i></button>

</div>

</div>

</form>

<ul class="navbar-nav ml-auto ml-md-0">

<li class="nav-item dropdown">

<a class="nav-link dropdown-toggle" id="userDropdown" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-user fa-fw"></i></a>

<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">

<a class="dropdown-item" href="#">Settings</a>

<a class="dropdown-item" href="#">Activity Log</a>

<div class="dropdown-divider"></div>

<a class="dropdown-item" href="login.html">Logout</a>

</div>

</li>

</ul>

</nav>

<div id="layoutSidenav">

<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="index.html">

<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-toggle="collapse" data-target="#collapseLayouts" aria-expanded="false" aria-controls="collapseLayouts">

<div class="sb-nav-link-icon"><i class="fas fa-columns"></i></div>

Home

<div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>

</a>

<div class="collapse" id="collapseLayouts" aria-labelledby="headingOne" data-parent="#sidenavAccordion">

<nav class="sb-sidenav-menu-nested nav">

<a class="nav-link" href="layout-static.html">Profile</a>

<a class="nav-link" href="layout-sidenav-light.html">Settings</a>

</nav>

</div>

<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapsePages" aria-expanded="false" aria-controls="collapsePages">

<div class="sb-nav-link-icon"><i class="fas fa-cog"></i></div>

Settings

<div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>

</a>

<div class="collapse" id="collapsePages" aria-labelledby="headingTwo" data-parent="#sidenavAccordion">

<nav class="sb-sidenav-menu-nested nav accordion" id="sidenavAccordionPages">

<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#pagesCollapseAuth" aria-expanded="false" aria-controls="pagesCollapseAuth">

Account Settings

<div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>

</a>

<div class="collapse" id="pagesCollapseAuth" aria-labelledby="headingOne" data-parent="#sidenavAccordionPages">

<nav class="sb-sidenav-menu-nested nav">

<a class="nav-link" href="#" routerLink = "/login" routerLinkActive = "active" >Login</a>

<a class="nav-link" href="#" routerLink = "/register" routerLinkActive = "active" >Register</a>

<a class="nav-link" href="#" routerLink = "/changepassword" routerLinkActive = "active">Change Password</a>

</nav>

</div>

<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#pagesCollapseError" aria-expanded="false" aria-controls="pagesCollapseError">

Activity

<div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>

</a>

<div class="collapse" id="pagesCollapseError" aria-labelledby="headingOne" data-parent="#sidenavAccordionPages">

<nav class="sb-sidenav-menu-nested nav">

<a class="nav-link" href="401.html">401 Page</a>

<a class="nav-link" href="404.html">404 Page</a>

<a class="nav-link" href="500.html">500 Page</a>

</nav>

</div>

</nav>

<a class="nav-link collapsed" href="#">

<div class="sb-nav-link-icon"><i class="fas fa-business-time"></i></div>

Attendance

</a>

<a class="nav-link collapsed" href="#">

<div class="sb-nav-link-icon"><i class="fas fa-money-check-alt"></i></div>

Payroll

</a>

<a class="nav-link collapsed" href="#">

<div class="sb-nav-link-icon"><i class="fas fa-plane"></i></div>

Travel Expenses

</a>

<a class="nav-link collapsed" href="#">

<div class="sb-nav-link-icon"><i class="fas fa-user-friends"></i></div>

Confirmation

</a>

<a class="nav-link collapsed" href="#">

<div class="sb-nav-link-icon"><i class="fas fa-cloud-download-alt"></i></div>

Downloads

</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">

<h1 class="mt-4">Kate's Personal Details</h1><br>

<ul class="breadcrumb mb-4">

<li class="breadcrumb-item"><img src="assets/id.jpg" width="140px" height="200px"></li>

<ul style="padding-top: 5px;"><li class="breadcrumb-item active">Name - Kate Adams</li> <br>

<li class="breadcrumb-item active">Employee ID - ap784</li> <br>

<li class="breadcrumb-item active">Date of Joining - 02/08/2018</li> <br>

<li class="breadcrumb-item active">Designation - Accountant</li> </ul> <br>

</ul>

</div>

</main>

<footer class="py-4 bg-light mt-auto">

<div class="container-fluid">

<div class="d-flex align-items-center justify-content-between small">

<div class="text-muted">Copyright © Simplilearn 2021</div>

<div>

<a href="#">Privacy Policy</a>

·

<a href="#">Terms & Conditions</a>

</div>

</div>

</div>

</footer>

</div>

</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>

<script src="js/scripts.js"></script>

</body>

We’ve also added the relevant path to the route in the app-routing.module.ts

{path: 'static',component: ToggleComponent, pathMatch: 'full'},

The path id we have given is static. Once run, the application looks like this.

Step_6

Step 7

Add the routes for the login, register, and change password options in Settings>>Account settings option.

The code for Login-component.html is

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

<meta name="description" content="" />

<meta name="author" content="" />

<title>Page Title - SB Admin</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/js/all.min.js" crossorigin="anonymous"></script>

</head>

<body class="bg-primary">

<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-group">

<label class="small mb-1" for="inputEmailAddress">Email</label>

<input class="form-control py-4" id="inputEmailAddress" type="email" placeholder="Enter email address" />

</div>

<div class="form-group">

<label class="small mb-1" for="inputPassword">Password</label>

<input class="form-control py-4" id="inputPassword" type="password" placeholder="Enter password" />

</div>

<div class="form-group">

<div class="custom-control custom-checkbox">

<input class="custom-control-input" id="rememberPasswordCheck" type="checkbox" />

<label class="custom-control-label" for="rememberPasswordCheck">Remember password</label>

</div>

</div>

<div class="form-group d-flex align-items-center justify-content-between mt-4 mb-0">

<a class="small" href="password.html">Forgot Password?</a>

<a class="btn btn-primary" href="index.html">Login</a>

</div>

</form>

</div>

<div class="card-footer text-center">

<div class="small"><a href="register.html">Need an account? Sign up!</a></div>

</div>

</div>

</div>

</div>

</div>

</main>

</div>

<div id="layoutAuthentication_footer">

<footer class="py-4 bg-light mt-auto">

<div class="container-fluid">

<div class="d-flex align-items-center justify-content-between small">

<div class="text-muted">Copyright © Simplilearn 2021</div>

<div>

<a href="#">Privacy Policy</a>

·

<a href="#">Terms & Conditions</a>

</div>

</div>

</div>

</footer>

</div>

</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>

<script src="js/scripts.js"></script>

</body>

</html>

Add the route in the app-routing.module.ts file

{path:'login',component: LoginComponent},

The output looks like this:

Step_7

Create another component for registration and add the code in the register.html file

<html lang="en">

<head>

<meta charset="utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

<meta name="description" content="" />

<meta name="author" content="" />

<title>Page Title - SB Admin</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/js/all.min.js" crossorigin="anonymous"></script>

</head>

<body class="bg-primary">

<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="form-row">

<div class="col-md-6">

<div class="form-group">

<label class="small mb-1" for="inputFirstName">First Name</label>

<input class="form-control py-4" id="inputFirstName" type="text" placeholder="Enter first name" />

</div>

</div>

<div class="col-md-6">

<div class="form-group">

<label class="small mb-1" for="inputLastName">Last Name</label>

<input class="form-control py-4" id="inputLastName" type="text" placeholder="Enter last name" />

</div>

</div>

</div>

<div class="form-group">

<label class="small mb-1" for="inputEmailAddress">Email</label>

<input class="form-control py-4" id="inputEmailAddress" type="email" aria-describedby="emailHelp" placeholder="Enter email address" />

</div>

<div class="form-row">

<div class="col-md-6">

<div class="form-group">

<label class="small mb-1" for="inputPassword">Password</label>

<input class="form-control py-4" id="inputPassword" type="password" placeholder="Enter password" />

</div>

</div>

<div class="col-md-6">

<div class="form-group">

<label class="small mb-1" for="inputConfirmPassword">Confirm Password</label>

<input class="form-control py-4" id="inputConfirmPassword" type="password" placeholder="Confirm password" />

</div>

</div>

</div>

<div class="form-group mt-4 mb-0"><a class="btn btn-primary btn-block" href="login.html">Create Account</a></div>

</form>

</div>

<div class="card-footer text-center">

<div class="small"><a href="login.html">Have an account? Go to login</a></div>

</div>

</div>

</div>

</div>

</div>

</main>

</div>

<div id="layoutAuthentication_footer">

<footer class="py-4 bg-light mt-auto">

<div class="container-fluid">

<div class="d-flex align-items-center justify-content-between small">

<div class="text-muted">Copyright © Simplilearn 2021</div>

<div>

<a href="#">Privacy Policy</a>

·

<a href="#">Terms & Conditions</a>

</div>

</div>

</div>

</footer>

</div>

</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>

<script src="js/scripts.js"></script>

</body>

</html>

Add the routing path in the app-routing.module.ts file

{path: 'register', component: RegisterComponent},

The output will look something like this:

Step_7_output

Create another component to display the content for the forgot password option. The HTML code is given below.

<html lang="en">

<head>

<meta charset="utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

<meta name="description" content="" />

<meta name="author" content="" />

<title>Page Title - SB Admin</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/js/all.min.js" crossorigin="anonymous"></script>

</head>

<body class="bg-primary">

<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">Change Password</h3></div>

<div class="card-body">

<div class="small mb-3 text-muted">Enter your email address and we will send you a link to reset your password.</div>

<form>

<div class="form-group">

<label class="small mb-1" for="inputEmailAddress">Email</label>

<input class="form-control py-4" id="inputEmailAddress" type="email" aria-describedby="emailHelp" placeholder="Enter email address" />

</div>

<div class="form-group d-flex align-items-center justify-content-between mt-4 mb-0">

<a class="small" href="login.html">Return to login</a>

<a class="btn btn-primary" href="login.html">Reset Password</a>

</div>

</form>

</div>

<div class="card-footer text-center">

<div class="small"><a href="register.html">Need an account? Sign up!</a></div>

</div>

</div>

</div>

</div>

</div>

</main>

</div>

<div id="layoutAuthentication_footer">

<footer class="py-4 bg-light mt-auto">

<div class="container-fluid">

<div class="d-flex align-items-center justify-content-between small">

<div class="text-muted">Copyright © Simplilearn 2021</div>

<div>

<a href="#">Privacy Policy</a>

·

<a href="#">Terms & Conditions</a>

</div>

</div>

</div>

</footer>

</div>

</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>

<script src="js/scripts.js"></script>

</body>

</html>

Add the route in the app-routing.module.ts file.

{path: 'changepassword', component: PasswordComponent}

The output looks like this:

[[ROuting_password GIF]]

Step 8: Add a default route for the navbar in the app-routing.module.ts file.

import { NgModule } from '@angular/core';

import { Routes, RouterModule } from '@angular/router';

import { NavbarComponent } from './navbar/navbar.component';

import { LoginComponent } from './Routes/login/login.component';

import { PasswordComponent } from './Routes/password/password.component';

import { RegisterComponent } from './Routes/register/register.component';

import { ToggleComponent } from './toggle/toggle.component';

const routes: Routes = [

{path: '',component: NavbarComponent},

{path: 'static',component: ToggleComponent, pathMatch: 'full'},

{path:'login',component: LoginComponent},

{path: 'register', component: RegisterComponent},

{path: 'changepassword', component: PasswordComponent},

];

@NgModule({

imports: [RouterModule.forRoot(routes)],

exports: [RouterModule]

})

export class AppRoutingModule { }

You could also find some HTML code for the different parts of the user interface and add them as shown above.

This article on the Angular project aims at creating just the frontend of the application. You could add more features and make it more responsive.

Next Steps

We hope that this article on the Angular Project helped you understand how to embed templates into Angular. But, if you wish to learn Angular and perhaps make a career out of it, Full Stack Java Developer will come in handy.

Simplilearn's Angular Certification Training Course helps you master front-end web development with Angular. You will learn the knack of creating applications with the help of concepts like facilitating the development of single-page web applications, components, typescript, dependency injection, and directives with this course. The course also includes a real-time project to test your skills.

If you have feedback or questions, drop us a comment in the comments section. Our experts will get back to you ASAP!

Find our Full Stack Java Developer Masters Program Online Bootcamp in top cities:

Name	Date	Place
Full Stack Java Developer Masters Program	Cohort starts on 18th Dec 2024, Weekend batch	Your City	View Details
Full Stack Java Developer Masters Program	Cohort starts on 8th Jan 2025, Weekend batch	Your City	View Details

About the Author

Chinmayee Deshpande

Chinmayee is a Research Analyst and a passionate writer. Being a technology enthusiast, her thorough knowledge about the subject helps her develop structured content and deliver accordingly.

View More

Recommended Resources

prevNext

Disclaimer
PMP, PMI, PMBOK, CAPM, PgMP, PfMP, ACP, PBA, RMP, SP, OPM3 and the PMI ATP seal are the registered marks of the Project Management Institute, Inc.