Good day all. This time I have planned to publish .NET 6.0 and Angular series of articles. In this series, I have planned to publish articles including:
Introduction
In this article, we will see in detail on how to get started with the .NET 6.0 and Standalone Angular Template for using the Admin LTE bootstrap design to make a simple website.
In this article, we will use our previous article .NET 6.0 and Standalone Angular Template source to apply the Admin LTE design. Kindly read my previous article which explains a very detailed step-by-step method to getting started .NET 6.0 and Standalone Angular Template.
![]()
The reason why we use AdminLTE is as its open-source admin dashboard which was been developed using Bootstrap. If we want to build a client and admin kind of website then it's best to use the AdminLTE admin dashboard, Client and Admin website, we can say the e-Commerce websites, MES, and all kinds of Management websites.
For example, we can consider the shopping card websites which have multiple user roles and the dashboard and page options for each role might be different. I have made a simple demo sample of the use case of a Shopping cart website as you can see from the below image which has several user types and also I have added the basic modules which the shopping cart website will be having.
![]()
User Roles
Admin
Super Admin
The Super Admin is the main user of the Shopping Cart users as he will be having all the controls of shopping cart site. Sometimes the Super Admin can also be the software development team who develops the site and also the owner of the shopping cart to monitor and control all other rolls. The important site setting and menu masters will handle only by this Super Admin for safety and security reasons.
Admin
Admins can be created by the Super Admin and all the site control will be handled by the main admin as he can create staffs and also, he can accept, delete and monitor all the activities of vendors customers, staffs, and guest users.
Staff
The Staff might have the limited roles, example if a staff is sales staff, then he can monitor all the sales part of the shopping cart site, if the staff is related to delivery management, then he can view all the orders and make delivery and track and monitor the delivery status and check and confirm whether the delivery is done successfully or not.
Client
Vendors
Vendors can be registered and can be approved by the Admin or SuperAdmin, after approval the vendors can upload their products to the shopping cart site, and they can view all the ordered details of their products like delivered, canceled, and pending order details.
Customers
The customers are the end-users who will register on the shopping cart site, search for their needed items, and shop. The customers can view their Cart details, order history details, and track the delivery status of their ordered items. The customer can also cancel the ordered item based on the condition made by the vendors.
Guest users
The Guest Users are guest checkout users who are allowed to do shopping without registration and logging into the shopping cart site.
The Online shopping site will also have basic modules like User Modules to create and manage the user, creating role and manage the users based on the role. Products as the admin, staff or the Vendors can add and manage their items based on category with item details like sales cost, item images, item delivery cost and etc. apart from this some more basic menu like Order Managements, Sales Management, Delivery & Tracking Management and etc.
So here we can see that for each user role the dashboard can be different for the admins as well for the clients. For giving the website a more standard look and feel we can use the AdminLTE admin dashboard Bootstrap design. In this way our website can also be easily accessed in multiplatform like Mobile, Tablet and in any PC which has internet and easy access anywhere anytime.
Prerequisites
- Visual Studio 2022
- Node.js – If you don’t have Node.js install Node.js (Download link).
- Angular CLI (Download link).
- Admin LTE Admin Dashboard Template (Download link).
Visual Studio 2022
If you have not yet installed Visual Studio 2022 then you can download the Visual studio 2022 from this link and install it on your computer.
Download and install the Visual Studio 2022.
![]()
Note: The Community version is free for all and you can download the community version. If you don’t have the Installation Key, if you have the Installation key or have the MSDN subscription then you can download the Professional or Enterprise version.
As a Microsoft MVP I have the MSDN subscription and I have installed the Professional version.
![]()
AdminLTE
From the AdminLTE website link, we can download the latest AdminLTE Bootstrap design documents.
![]()
After downloading unzip, the AdminLTE folder and we can see all the needed pages, plugins, scripts, CSS, and demo pages will be added inside the folder.
![]()
To check the ADMINLTE page we can open the demo pages from the folder as Index.html, index2.html, index3.html along with the iframe HTML with different themes. If we open any of the demo HTML pages we can see the demo of the AdminLTE design as here we have opened the dashboard with the menus at the left and some plugins to show the dashboard more rick to the end-users.
![]()
Code Part
Note
We will be using our previous article Source to apply the AdminLTE Bootstrap template for the project in step-by-step ways. Note here I will be copying the needed folders and files from the downloaded AdminLTE folders to our Angular and .NET 6.0 Angular Standalone Template Project.
Step 1
Create Content folder inside the assets folder and inside Content folder create 2 more folders as SiteImg and UITemplate.Inside the UITemplate we will copy all the dist, JavaScript and Plugin folders of the AdminLTE, and the SiteImage folder will be used to save the images which we used for our website.
![]()
Step 2
Drag and drop both the dist and plugins folder from the downloaded AdminLTE folder to our Angular project UITemplate folder.
![]()
Step 3
Next you can open the Index.html in editor from the AdminLTE folder and copy the header link and Script part.
![]()
Step 4
Now let’s design our Online Shopping cart dashboard page. For this first we need to add the CSS and JavaScript plugins to our Angular Index page.
Open the Index.html file from your Angular Project.
![]()
Paste the header and script part to our Angular index.html file.
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv=Content-Type content="text/html; charset=windows-1252">
<title>LINK5 BOT2U </title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" href="assets/UITemplate/dist/css/video-js.css">
<link rel="stylesheet" href="assets/UITemplate/dist/css/video-js.min.css">
<!-- Google Font: Source Sans Pro -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="assets/UITemplate/plugins/fontawesome-free/css/all.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="assets/UITemplate/dist/css/adminlte.min.css">
<link rel="stylesheet" href="assets/UITemplate/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
<!-- daterange picker -->
<link rel="stylesheet" href="assets/UITemplate/plugins/daterangepicker/daterangepicker.css">
<!-- iCheck for checkboxes and radio inputs -->
<link rel="stylesheet" href="assets/UITemplate/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
<!-- Bootstrap Color Picker -->
<link rel="stylesheet" href="assets/UITemplate/plugins/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css">
<!-- Tempusdominus Bootstrap 4 -->
<link rel="stylesheet" href="assets/UITemplate/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
<!-- Select2 -->
<link rel="stylesheet" href="assets/UITemplate/plugins/select2/css/select2.min.css">
<link rel="stylesheet" href="assets/UITemplate/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
<!-- Bootstrap4 Duallistbox -->
<link rel="stylesheet" href="assets/UITemplate/plugins/bootstrap4-duallistbox/bootstrap-duallistbox.min.css">
<!-- BS Stepper -->
<link rel="stylesheet" href="assets/UITemplate/plugins/bs-stepper/css/bs-stepper.min.css">
<!-- dropzonejs -->
<link rel="stylesheet" href="assets/UITemplate/plugins/dropzone/min/dropzone.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="assets/UITemplate/dist/css/adminlte.min.css">
<link rel="stylesheet" href="assets/UITemplate/plugins/jquery-ui/jquery-ui.css" />
<link rel="stylesheet" href="assets/UITemplate/js/jqueryconfirm/js/custom.jqueryconfirm.js" />
<link rel="stylesheet" href="assets/UITemplate/js/jqueryconfirm/dist/jquery-confirm.min.css" />
<!-- SweetAlert2 -->
<link rel="stylesheet" href="assets/UITemplate/plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css">
<!-- Toastr -->
<link rel="stylesheet" href="assets/UITemplate/plugins/toastr/toastr.min.css">
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
<!-- REQUIRED SCRIPTS -->
<!-- jQuery -->
<!-- jQuery -->
<script asp-append-version="true" src="assets/UITemplate/plugins/jquery/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script asp-append-version="true" src="assets/UITemplate/plugins/jquery-ui/jquery-ui.min.js"></script>
<script asp-append-version="true" src="assets/UITemplate/plugins/jquery-ui/jquery-ui.js"></script>
<script asp-append-version="true" src="assets/UITemplate/plugins/jquery-ui/jquery-ui.min.js"></script>
<!-- Bootstrap 4 -->
<script asp-append-version="true" src="assets/UITemplate/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
$.widget.bridge('uibutton', $.ui.button)
$(function() {
var Toast = Swal.mixin({
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 3000
});
}
</script>
<script src="https://unpkg.com/[email protected]/dist/system.js"></script>
<!-- Bootstrap 4 -->
<script src="assets/UITemplate/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- overlayScrollbars -->
<script src="assets/UITemplate/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
<!-- AdminLTE App -->
<script src="assets/UITemplate/dist/js/adminlte.js"></script>
<!-- daterangepicker -->
<script src="assets/UITemplate/plugins/moment/moment.min.js"></script>
<script src="assets/UITemplate/plugins/daterangepicker/daterangepicker.js"></script>
<!-- Tempusdominus Bootstrap 4 -->
<script src="assets/UITemplate/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>
<!-- Summernote -->
<script src="assets/UITemplate/plugins/summernote/summernote-bs4.min.js"></script>
<!-- overlayScrollbars -->
<script src="assets/UITemplate/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
<!-- daterangepicker -->
<script src="assets/UITemplate/plugins/moment/moment.min.js"></script>
<script src="assets/UITemplate/plugins/daterangepicker/daterangepicker.js"></script>
<!-- Tempusdominus Bootstrap 4 -->
<script src="assets/UITemplate/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>
<!-- Summernote -->
<script src="assets/UITemplate/plugins/summernote/summernote-bs4.min.js"></script>
<!-- overlayScrollbars -->
<script src="assets/UITemplate/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
<script src="assets/UITemplate/plugins/toastr/toastr.min.js"></script>
<script src="assets/UITemplate/js/jqueryconfirm/dist/jquery-confirm.min.js"></script>
<script src="assets/UITemplate/js/jqueryconfirm/js/custom.jqueryconfirm.js"></script>
<!-- Select2 -->
<script src="assets/UITemplate/plugins/select2/js/select2.full.min.js"></script>
<!-- Bootstrap4 Duallistbox -->
<script src="assets/UITemplate/plugins/bootstrap4-duallistbox/jquery.bootstrap-duallistbox.min.js"></script>
<!-- InputMask -->
<script src="assets/UITemplate/plugins/moment/moment.min.js"></script>
<script src="assets/UITemplate/plugins/inputmask/jquery.inputmask.min.js"></script>
<!-- date-range-picker -->
<script src="assets/UITemplate/plugins/daterangepicker/daterangepicker.js"></script>
<!-- bootstrap color picker -->
<script src="assets/UITemplate/plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js"></script>
<!-- Tempusdominus Bootstrap 4 -->
<script src="assets/UITemplate/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>
<!-- Bootstrap Switch -->
<script src="assets/UITemplate/plugins/bootstrap-switch/js/bootstrap-switch.min.js"></script>
<!-- BS-Stepper -->
<script src="assets/UITemplate/plugins/bs-stepper/js/bs-stepper.min.js"></script>
<!-- dropzonejs -->
<script src="assets/UITemplate/plugins/dropzone/min/dropzone.min.js"></script>
<!-- SweetAlert2 -->
<script src="assets/UITemplate/plugins/sweetalert2/sweetalert2.min.js"></script>
<!-- Toastr -->
<script src="assets/UITemplate/plugins/toastr/toastr.min.js"></script>
Step 5
Now let’s add the Header, Navigation, Footer and dashboard folder inside our Angular App folder.
Inside the dashboard page we will create our main dashboard landing design page. In the layout folders we add the footer, top navigation bar, and the side menu bar part of our shopping cart website.
![]()
footer Component
Now let’s add footer component inside our footer folder and add the below HTML and component code.
footer.component.html
<footer class="main-footer">
<img src="assets/Content/SiteImg/logo.png" alt="Shanu Cart" style="height:36px;width:36px"> <strong>Copyright © 2022-2023 .</strong>
<div class="float-right d-none d-sm-inline-block">
<strong>Shanu <b>Cart</b>
</strong> - Shop your need's from Anywhere Anytime
</div>
</footer>
footer.component.ts
import { Component, Inject } from '@angular/core';
@Component({
selector: 'app-footer',
templateUrl: './footer.component.html'
})
export class FooterComponent {}
navbar Component
Now let’s add Top Navigation Bar for our shopping cart site and let’s add the component inside our navbar folder and add the below HTML and component code.
Note: Here in navbar I have also added the language selection option for our Shopping Cart Site. In the next article, we will see in detail how to add multi-language option for our Angular projects.
navbar.component.html
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-dark" style="height:40px;">
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#" role="button" enableRemember="true"><i class="fas fa-bars"></i></a>
</li>
<li class="nav-item">
<h5 class="nav-link">
<i class="fa fa-bug"></i>
<strong>Shanu <b>Cart</b> </strong>
</h5>
</li>
</ul>
<!-- Right navbar links -->
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link" asp-controller="Home" asp-action="Index"> Welcome Shanu !</a>
</li>
<!-- Messages Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="fas fa-language"></i>
</a>
<div class="dropdown-menu dropdown-menu-lg-right dropdown-menu-right" style="max-width: 20px;width:20px">
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<img src="../../../../assets/Content/SiteImg/KOR.png" alt="Korean" class="img-size-32 mr-lg-4 img-circle" style="height:24px;width:24px;">
<div class="media-body">
<h3 class="dropdown-item-title">
KOREA
</h3>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item ">
<!-- Message Start -->
<div class="media">
<img src="../../../../assets/Content/SiteImg/ENG.png" alt="English" class="img-size-32 mr-lg-4 img-circle" style="height:24px;width:24px;">
<div class="media-body">
<h3 class="dropdown-item-title ">
ENGLISH
</h3>
</div>
</div>
<!-- Message End -->
</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-widget="fullscreen" href="#" role="button">
<i class="fas fa-expand-arrows-alt"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#" role="button" enableRemember="true"><i class="fas fa-bars"></i></a>
</li>
</ul>
</nav>
navbar.component.ts
import { Component, Inject } from '@angular/core';
@Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html'
})
export class NavBarComponent {}
Sidebar Component
Now let’s add our main menus for our Shopping Cart website. Let’s add Angular component inside our sidebar folder and add the below HTML and component code.
Note: For demo purposes, I have made the static menus, The actual Admin and client modules menu will be dynamic and loaded based on user logged-in role from the database. Later in this article series, I will try to add a new article that explains as to how to make the dynamic menu and display based on role in our shopping cart site.
sidebar.component.html
<!-- Main Sidebar Container -->
<aside class="main-sidebar sidebar-dark-primary elevation-4">
<!-- Brand Logo -->
<a class="brand-link" [routerLink]="['/dashboard']">
<img src="../../../../assets/Content/SiteImg/logo.png" alt="Shanu Cart" class="brand-image" style="opacity: .8">
<span class="brand-text font-weight-light">Shanu Cart</span>
</a>
<!-- Sidebar -->
<div class="sidebar">
<!-- Sidebar Menu -->
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<li class="nav-item">
<a class="nav-link" [routerLink]="['/dashboard']">
<i class="nav-icon fas fa-th"></i>
<p>
Dashboard
<span class="right badge badge-danger">New</span>
</p>
</a>
</li>
<li class="nav-item">
<!--<a class="nav-link" [routerLink]="['/fetch-data']">-->
<a class="nav-link" [routerLink]="['/home']">
<i class="nav-icon fas fa-th"></i>
<p>
About Us
</p>
</a>
</li>
<li class="nav-item">
<!--<a class="nav-link" [routerLink]="['/fetch-data']">-->
<a class="nav-link" [routerLink]="['/items']">
<i class="nav-icon fas fa-th"></i>
<p>
Item Sales
<span class="right badge badge-danger">New</span>
</p>
</a>
</li>
<li class="nav-item">
<a class="nav-link" [routerLink]="['/']">
<i class="nav-icon fas fa-copy"></i>
<p>
Products
<i class="fas fa-angle-left right"></i>
<span class="badge badge-info right">3</span>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a class="nav-link" [routerLink]="['/']">
<i class="far fa-circle nav-icon"></i>
<p>Category</p>
</a>
</li>
<li class="nav-item">
<a class="nav-link" [routerLink]="['/']">
<i class="far fa-circle nav-icon"></i>
<p>Add Item</p>
</a>
</li>
<li class="nav-item">
<a class="nav-link" [routerLink]="['/']">
<i class="far fa-circle nav-icon"></i>
<p>Search Item</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" [routerLink]="['/']">
<i class="nav-icon fas fa-copy"></i>
<p>
Orders
<i class="fas fa-angle-left right"></i>
<span class="badge badge-info right">3</span>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a class="nav-link" [routerLink]="['/']">
<i class="far fa-circle nav-icon"></i>
<p>Order Details</p>
</a>
</li>
<li class="nav-item">
<a class="nav-link" [routerLink]="['/']">
<i class="far fa-circle nav-icon"></i>
<p>Address Book</p>
</a>
</li>
<li class="nav-item">
<a class="nav-link" [routerLink]="['/']">
<i class="far fa-circle nav-icon"></i>
<p>Delivery Status</p>
</a>
</li>
</ul>
</li>
</ul>
</nav>
<!-- /.sidebar-menu -->
</div>
<!-- /.sidebar -->
</aside>
sidebar.component.ts
import { Component, Inject } from '@angular/core';
@Component({
selector: 'app-sidebar',
templateUrl: './sidebar.component.html'
})
export class SideBarComponent {}
Step 6 - Dashboard Component
Now let’s design the admin part main landing dashboard page. Here I made a very simple dashboard design that displays Todays Total Order, Todays Delivered Items, Today's Sales and Todays Returned Items. We also add a HTML table to display current month item sales by item code.
Note: In our previous article in the series I have explained how to add the WEB API Controller and then binding the WEB API result in our Angular Application. Here in this article I have done the same format and added the WEB API to return the Item sales count and banded the result in the dashboard as well.
Later in this series, we will see in detail by using the database connection and perform the CRUD operation using .NET 6 and Angular Standalone Template.
dashboard.component.html
<section class="content">
<br />
<div class="container-fluid">
<div>
<div class="row">
<div class="col-12 col-sm-6 col-md-3">
<div class="info-box mb-3 shadow">
<span class="info-box-icon bg-info elevation-1">
<i class="fa fa-cart-arrow-down"></i>
</span>
<div class="info-box-content">
<span class="info-box-text">Todays Total Orders</span>
<span class="info-box-number">
5000
</span>
</div>
<div class="icon">
<i class="ion ion-bag"></i>
</div>
<!-- /.info-box-content -->
</div>
<!-- /.info-box -->
</div>
<!-- /.col -->
<div class="col-12 col-sm-6 col-md-3">
<div class="info-box mb-3 shadow">
<span class="info-box-icon bg-danger elevation-1">
<i class="fa fa-truck"></i>
</span>
<div class="info-box-content">
<span class="info-box-text">Todays Delivered Items</span>
<span class="info-box-number">230</span>
</div>
<!-- /.info-box-content -->
</div>
<!-- /.info-box -->
</div>
<!-- /.col -->
<!-- fix for small devices only -->
<div class="clearfix hidden-md-up"></div>
<div class="col-12 col-sm-6 col-md-3">
<div class="info-box mb-3 shadow">
<span class="info-box-icon bg-success elevation-1">
<i class="fa fa-university"></i>
</span>
<div class="info-box-content">
<span class="info-box-text">Todays Sales </span>
<span class="info-box-number">23,000 $</span>
</div>
<!-- /.info-box-content -->
</div>
<!-- /.info-box -->
</div>
<!-- /.col -->
<div class="col-12 col-sm-6 col-md-3">
<div class="info-box mb-3 shadow">
<span class="info-box-icon bg-warning elevation-1">
<i class="fa fa-angle-double-left" aria-hidden="true"></i>
</span>
<div class="info-box-content">
<span class="info-box-text">Todays Returned Items </span>
<span class="info-box-number">13</span>
</div>
<!-- /.info-box-content -->
</div>
<!-- /.info-box -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
<!-- Main row -->
<div class="row">
<div class="col-md-8">
<div class="card card-outline card-success">
<div class="card-header">
<h3 class="card-title">Item Sales Count by current Month </h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
</div>
</div>
<div class="card-body" style="display: flex; justify-content: center;">
<table class="table table-bordered table-striped" *ngIf="itemsdetails">
<thead>
<tr>
<th> Item Code </th>
<th> sale Count </th>
</tr>
</thead>
<tbody>
<tr *ngFor="let itemdetail of itemsdetails">
<td>{{ itemdetail.itemCode }}</td>
<td>{{ itemdetail.saleCount }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card card-outline card-primary">
<div class="card-header">
<h3 class="card-title">Shanu Cart Logo</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
</div>
<!-- /.card-tools -->
</div>
<!-- /.card-header -->
<div class="card-body" style="display: flex; justify-content: center;">
<img src="../../assets/Content/SiteImg/logo.png" style="width:60%;" />
</div>
</div>
</div>
</div>
<!-- /.row (main row) -->
</div><!-- /.container-fluid -->
</div>
</section>
bashboard.component.ts
import { Component, Inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
})
export class DashboardComponent {
public itemsdetails: ItemDetails[] = [];
constructor(http: HttpClient) {
http.get<ItemDetails[]>('/ItemDetails').subscribe(result => {
this.itemsdetails = result;
}, error => console.error(error));
}
}
interface ItemDetails {
itemCode: string;
saleCount: number;
}
Note
Add all the above component and routing to our app.module
Step 7 - app.component.html
Now let's add the below code to our app component as here we added all our Navigation Bar, Side Bar, Footer to be displayed in main app component.
<body class="dark-mode sidebar-mini sidebar-collapse">
<app-navbar></app-navbar>
<app-sidebar></app-sidebar>
<div class="content-wrapper">
<nav style="background-color: #49b0fa;height:2px ;">
</nav>
<router-outlet></router-outlet>
</div>
<app-footer></app-footer>
</body>
Note
I have also added one more app component named as items and bind the item sales count on that page and in the side, menu click, we display our Admin dashboard pages.
Step 8 - Build and Run
Now it's time to see our Admin Dashboard page. When we run our application, we can see the Dashboard page like below. Here I display the item sales details from the WEB API and rest of the details as the static content later in this series we can see how to bind all the results from database.
![]()
When we click on the Item Sales menu from the link, we display the current month Items sales details. For the rest of the menu, I made it static for demo purposes.
![]()
Conclusion
Hope this article helps to understand on getting started with ASP.NET Core and Angular Standalone project using Visual Studio 2022 and designing our .NET 6 application using the Admin LTE Bootstrap Templates. In the next part, we will see more in detail on how to use the ASP.NET Core and Angular to make the Admin LTE designs.