v4.0Bootstrap 5 responsive admin template
documented by Sean Ngu
Updated on: 23/March/2025
By: Sean Ngu
Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to send your question via ThemeForest. Thanks so much!
Follow the following step to install the angular 19 in your localhost
You may refer to their official documentation for how to setup the development environment.
Setup Guide
<!-- run the following command --> cd /your-path-url/hud_angular_v4.0 npm install ng serve <!-- browse the url --> http://localhost:4200/
Verify that you are running at least node 22.x.x or later and npm 11.x.x by running node -v and npm -v in a terminal/console window. Older versions produce errors, but newer versions are fine.
Besides that, make sure the @angular/cli has been installed in your localhost
File structure overview for HUD - Angular 19
template_angular/
├── angular.json
├── karma.conf.js
├── package.json
├── protractor.conf.js
├── README.md
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.spec.json
├── tslint.json
├── e2e/
└── src/
├── app/ // app module, routing, pages, components
├── assets/ // json data, images
├── environments/ // build settings
├── favicon.ico
├── index.html
├── main.ts
├── polyfills.ts
├── scss/ // core styling for HUD in scss
├── styles.css // include font icons and custom css here
├── test.ts
├── tsconfig.app.json
├── tsconfig.spec.json
└── typings.d.ts
Below is the general app structure for app component /src/app/app.component.html. It include the app header, sidebar, content, footer and theme panel. You may remove the component if you are not using it.
<!-- BEGIN #app -->
<div id="app" class="app" [ngClass]="{
'd-none': !appLoaded,
'app-with-top-nav': appSettings.appTopNav,
'app-without-header': appSettings.appHeaderNone,
'app-without-sidebar': appSettings.appSidebarNone,
'app-boxed-layout': appSettings.appBoxedLayout,
'app-sidebar-collapsed': appSettings.appSidebarCollapsed,
'app-content-full-height': appSettings.appContentFullHeight,
'app-content-full-width': appSettings.appContentFullWidth,
'app-footer-fixed': appSettings.appFooter
}">
<header *ngIf="!appSettings.appHeaderNone"></header>
<top-nav *ngIf="appSettings.appTopNav"></top-nav>
<sidebar *ngIf="!appSettings.appSidebarNone"></sidebar>
<sidebar-mobile-backdrop *ngIf="!appSettings.appSidebarNone"></sidebar-mobile-backdrop>
<div id="content" class="app-content" [class]="appSettings.appContentClass">
<router-outlet></router-outlet>
</div>
<footer *ngIf="appSettings.appFooter"></footer>
<theme-panel></theme-panel>
</div>
<!-- END #app -->
HUD Angular using service to create / store the app sidebar menu. You can view the file from /src/app/service/app-menu.service.ts.
Below is the example for one / two level sidebar menu.
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class AppMenuService {
getAppMenus() {
return [
{ 'text': 'Navigation', 'is_header': true },
{ 'path': '/', 'icon': 'bi bi-house-door', 'text': 'Home' },
{ 'path': '/level', 'icon': 'bi bi-layout-sidebar', 'text': 'Level 1', 'children': [
{ 'path': '/level/1.1', 'text': 'Level 1.1'},
{ 'path': '/level/1.3', 'text': 'Level 1.3'}]
}
];
}
}
HUD Angular using service to create / store the app options and share within different pages. You can use the app option to create different
layout like (full width page, without header, without sidebar and etc). You can view the file from /src/app/service/app-options.service.ts.
Below is the list of app options available and example for how to use the app option within the different pages.
import { Component } from '@angular/core';
import { AppSettings } from '../../../service/app-settings.service';
@Component({
selector: 'custom-page',
templateUrl: './custom.html'
})
export class CustomPage {
constructor(private appSettings: AppSettings) {
this.appSettings.appBoxedLayout = true;
this.appSettings.appHeaderNone = true;
this.appSettings.appFooter = true;
this.appSettings.appTopNav = true;
this.appSettings.appSidebarNone = true;
this.appSettings.appSidebarCollapsed = true;
this.appSettings.appContentClass = 'p-0';
this.appSettings.appContentFullHeight = true;
this.appSettings.appContentFullWidth = true;
}
// reset to default before the page leave
ngOnDestroy() {
this.appSettings.appBoxedLayout = false;
this.appSettings.appHeaderNone = false;
this.appSettings.appFooter = false;
this.appSettings.appSidebarNone = false;
this.appSettings.appSidebarCollapsed = false;
this.appSettings.appContentClass = '';
this.appSettings.appContentFullHeight = false;
this.appSettings.appContentFullWidth = false;
}
}
HUD Angular using service to create / store the app variables like font / color from css and share within different pages. You can use the app variables to implement it
into the plugins like (chart js / apexchart) while theme change. Below is the example for how to use the app variables within the pages.
You can view the file from /src/app/service/app-variables.service.ts for the full list of variables.
import { Component } from '@angular/core';
import { AppVariablesService } from '../../../service/app-variables.service';
@Component({
selector: 'custom-page',
templateUrl: './custom-page.html'
})
export class CustomPage {
appVariables = this.appVariablesService.getAppVariables();
public lineChartOptions: any = { };
constructor(private appVariablesService: AppVariablesService) {
// listen to the variables reload
this.appVariablesService.variablesReload.subscribe(() => {
this.appVariables = this.appVariablesService.getAppVariables();
this.renderLineChart();
});
}
renderLineChart() {
this.lineChartOptions = {
color: this.appVariables.color.themeColor
};
}
ngOnInit() {
this.renderLineChart();
}
}
List of components inside the /src/app/components folder
/src/app/components/ ├── card/ ├── footer/ ├── header/ ├── nav-scroll/ ├── sidebar/ ├── sidebar-mobile-backdrop/ ├── top-nav/ └── theme-panel/
Below is the global <card> component tags available within the app.
<card-group>
<card>
<card-header>
...
<card-expand-toggler>...</card-expand-toggler>
</card-header>
<card-body>
...
<card-img-overlay>
...
</card-img-overlay>
</card-body>
<card-footer>
..
</card-footer>
</card>
</card-group>
You may change the variable /src/app/service/app-settings.service.ts in order to change the app theme color.
public appTheme: string = 'theme-red'; /* available theme color */ theme-pink theme-orange theme-yellow theme-lime theme-green theme-teal theme-cyan theme-blue theme-purple theme-indigo theme-black theme-gray-100 theme-gray-200 theme-gray-300 theme-gray-400 theme-gray-500 theme-gray-600 theme-gray-700 theme-gray-800 theme-gray-900
OR
Add the theme to the <body> tag in /src/index.html in order to change the theme color.
<body class="theme-indigo">...</body>
OR
Edit the theme color variables from scss /src/scss/_variables.scss
<!-- LINE 100--> $theme: $indigo !default;
You may change the variable /src/app/service/app-settings.service.ts in order to change the app theme color.
public appCover: string = 'bg-cover-2'; /* available cover */ bg-cover-2 bg-cover-3 bg-cover-4 bg-cover-5 bg-cover-6 bg-cover-7 bg-cover-8 bg-cover-9
OR
Add the cover class to the <html> tag in /src/index.html in order to change the page cover.
<html class="bg-cover-2">...</html>
OR
Edit the body cover variables from scss /src/scss/_variables.scss
<!-- LINE 305-->
$body-bg-cover: url('images/cover-2.jpg') !default;
We have implemented a default dark mode theme that is applied to the HTML page.
This is achieved through the use of the data-bs-theme="dark" attribute in the <html> tag.
If you wish to enable the light mode instead, you can easily do so by removing the data-bs-theme="dark" attribute from the HTML tag in /src/index.html.
This will disable the default dark mode and enable the light mode theme.
Please note that once you remove the data-bs-theme="dark" attribute,
the light mode theme will persist even if the user refreshes the page or navigates to a different page within the application.
<!DOCTYPE html> <html lang="en" data-bs-theme="dark"> </html>to
<!DOCTYPE html> <html lang="en"> </html>
With this example, the data-bs-theme="dark" attribute has been removed from html tag. This will enable the light mode to the entire page.
OR
If you want to apply light / dark mode to a single component only, you can add the data-bs-theme="light|dark" attribute to that component.
<card data-bs-theme="light">
<card-body>
<!-- your component content here -->
</card-body>
</card>
To enable RTL mode, follow these steps:
/src/_variables.scss file in your code editor.$enable-rtl variable and change its value to true:
$enable-rtl: true;This will enable RTL mode for your application.
Global Variables
The /src/_variables.scss file contains the variables that control the styles of your application.
To edit these variables, navigate to the /src/_variables.scss file in your code editor and modify the values of the variables to suit your needs.
<!-- global variable --> /src/_variables.scss
Dark Mode Variables
The /src/_variables-dark.scss file contains the variables that control the styles for dark mode.
These variables are used in conjunction with the variables in the /src/_variables.scss file to provide different values for light and dark modes.
<!-- dark mode variable --> /src/_variables-dark.scss
I've used the following images, icons or other files as listed.
Platform
jQuery Plugins
Photos
Icons