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.
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>
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:
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>
<!-- Navbar Search-->
<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>
<!-- Navbar-->
<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 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>
<!-- <link href="css/styles.css" rel="stylesheet" /> -->
<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>
<!-- Navbar Search-->
<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>
<!-- Navbar-->
<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 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:
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>
<!-- <link href="css/styles.css" rel="stylesheet" /> -->
<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:
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>
<!-- <link href="css/styles.css" rel="stylesheet" /> -->
<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, certification 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!
