Easy To Learn .NET 6.0 And Angular - Getting Started Admin LTE Design

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.