Smarthr - Angular Online Documentation.

Introduction

Item Name

Smart HR - HRMS, Payroll, HR Project Management Admin Dashboard Template

Item Version

v4.1.2

Author

Dreams Technologies

Support Email

[email protected]

Smart HR - HRMS, Payroll, HR Project Management Admin Dashboard Template

Smart HR – HR Management Admin Template is a HR management solution for automating and simplifying HR operations. Smart HR is a simple, intelligent, and user-friendly solution that offers many kinds of technology modules to help in automating your human resource practices.

Contact Support Create Support ticket

System Requirements

Node.js

Version 24.x or later

npm

Version 11.x or later

Angular cli

Version 21 or latest

Features

Angular 21 + TypeScript

Fast, modern stack for web applications

Angular Material, PrimeNG & Bootstrap 5

Rich UI components and utilities

Code Splitting

Uses lazy loading in the componets

Custom Hooks

For theme, debouncing, and more

RTL Support

Dynamic RTL/LTR switching with custom overrides

Modular Structure

Feature-based organization for easy scaling

Custom Styling

All custom tweaks in src/styles.scss

Charts & Widgets

Dashboard-ready with ApexCharts, and more

Fully Responsive

Compatible with all mobile devices

Cross Browser

Compatible with all modern browsers

File Structure

Root Directory

Main project folder containing all source files

template/
├── public/                		 	# Static assets (favicon, images, etc.)
├── src/
│   ├── assets/            		 	# Images, icons, styles (scss/, css/)
│   ├── app/ 
│ 	│	├── core/          		 	# models,routes,services
│   │   └── features/ 	   			# Main pages Directory(404,500)
│	│   │   ├── authentication/  	# Authentication pages
│	│   │   ├── Pages/  		 	# pages Modules
│	│   │   |	├── Dashboard/   	# Dashboard pages
│	│   │   |	├── Application/    # Application pages
│	│   │   |	├── SuperAdmin/  	# SuperAdmin pages
│	│   │   |	├── CRM/   		 	# CRM pages
│	│   │   |	├── HRM/   		 	# HRM pages
│	│   │   |	├── pages/   	 	# pages pages
│	│   │   |	├── UI Interface/   # UI pages
│	│   │   |	├── etc../       	# Remaining pages
│   │	├── layouts/			 	# Common header , footer components
│   │	├── shared/				 	# Shared Components
│   │   ├── app.config.ts/       
│   │   ├── app.component.html/          	 
│   │   ├── app.routes.ts/       
│   │   ├── app.component.scss/         
│   │   └── app.ts/         
├── editorconfig                 
├── gitignore                  	  
├── angular.json
├── package.json                  
├── README.md
├── tsconfig.app.json
├── tsconfig.json
└── tsconfig.spec.json

Installation Guide

Getting Started with Mentoring Angular Template

Prerequisites

Node.js (v24 or later recommended). Download Node.js
npm (comes with Node.js)
Angular Cli (latest version)
Any modern web browser (Chrome, Firefox, Edge, Safari, etc.).

Extract the Template

After downloading, unzip the template package.
Navigate to SmartHR/angular (the source code folder).

Install Dependencies

Open a terminal/command prompt in the Angular folder.
Run:
```
npm install
```
This will install all required packages.

Start the Development Server

Run:
```
ng s or ng serve
```
Open the local URL shown in your terminal (usually http://localhost:4200/).
Your app will reload automatically as you edit source files.

Build for Production

To create an optimized production build, run:
```
ng build
```
The output will be in the dist/ folder, ready to deploy.

Install Additional Plugins

To add a new package (e.g., a chart library), run:
```
npm install package_name 
```
Replace package_name with the actual npm package you want to add.

Tips:

If you see errors about missing Node.js or npm, install them from the official website above.
For Mac/Linux users, you may need to use sudo for global installs.
For Windows users, run your terminal as Administrator if you encounter permission issues.
Refer to the README.md in the project root for more usage and customization details.

How to change Font ?

You can change the font you can edit it from Scss file.

Path: src/assets/scss/utils/_variables.scss

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

You can choose a font style from Google Fonts, and replace the existing link in your project with the one corresponding to your selected font.

To apply the new font, update the font-family in the body selector within the following SCSS file: Path: src/assets/scss/_variables.scss


body {
$font-family-primary: "Roboto", sans-serif;
}

Dark Mode

Path: src/app/shared/data/data.service.ts

replace '1' to '2' for "dark theme" likelocalStorage.getItem('themeColor') || '2'

How can I switch to the Different Layouts?

To enable different layout in a page, you need to follow these steps to ensure proper support . Here’s a guide with clear steps and explanations.

Step 1: On the right, click the Gear symbol.

There are other layout options available, and you can choose the one you prefer.

Step 2: You can find the layout code

You can find out the app-layout in core.component.html

Path: src\app\feature-module\feature-module.component.html

You can uninstall the feature if you don't need it by remove it

How to convert LTR Template to RTL

Add Bootstarp RTL

Please remove marked style in angular.json file and replace it with below style
```
"node_modules/bootstrap/dist/css/bootstrap.rtl.min.css"
```
Add Class in Body tag in index.html file
```
class="layout-mode-rtl"
```

How to convert LTR Template to RTL

Add Bootstarp RTL

Please remove marked style in angular.json file and replace it with below style
```
"node_modules/bootstrap/dist/css/bootstrap.rtl.min.css"
```
Add Class in Body tag in index.html file
```
class="layout-mode-rtl"
```

FAQs

With one purchase code you can use it on one domain name. You need to get new license for every new domain name, please check Envato Help Page for more information about licenses.

If you need support, or if you're facing any problems, please contact us via Envato Support
Please note that our respond can take up to 2 business days.

Availability to answer questions, Answering technical questions about item’s features, Assistance with reported bugs and issues, Help with included 3rd party assets.
Any customization request will be ignored.
Please make sure to read more about the support policy.

Support

If this documentation does not address your questions, please feel free to contact us via email at Item Support Page

We are in the GMT+5:30 time zone and typically respond to inquiries on weekdays within 12-24 hours. Please note that in rare cases, the response time may extend to 48 hours, especially during holiday seasons.

Note:

We strive to offer top-notch support, but it's only available to verified buyers and for template-related issues such as bugs and errors. Custom changes and third-party module setups are not covered.

Don’t forget to Rate Smart HR!

Please take a moment to rate our product on ThemeForest. Your support means a lot to us. Just go to your ThemeForest Profile > Downloads Tab, and you can leave a review for our script. Thank you!

License

Smart HR is developed by Dreams Technologies and is available under both Envato Extended & Regular License options.

Regular License

Usage by either yourself or a single client is permitted for a single end product, provided that end users are not subject to any charges.

Extended License

For use by you or one client in a single end product for which end users may be charged.

What are the main differences between the Regular License and the Extended License?

Note

If you operate as a freelancer or agency, you have the option to acquire the Extended License, which permits you to utilize the item across multiple projects on behalf of your clients.

Do you need a customized application for your business?

If you need a customized application for your business depends on your specific requirements and goals, Please contact us.

Customization can be the key to success, ensuring your project perfectly aligns with your unique goals and requirements.

Don't Miss Out on the Benefits of Customization!

Unlock the potential of your project. It's time to ensure that your project isn't just another cookie-cutter solution but a truly unique and effective one.

Discover how customization can make a difference in your project's success. Let's create a solution that's as unique as your vision!

We'll tailor the application to meet your specific needs and preferences.
We will upload your website to the server and ensure it is live.

Book an Appointment Get a Free Quote

[email protected]

Getting Started

Introduction

Smart HR - HRMS, Payroll, HR Project Management Admin Dashboard Template

System Requirements

Node.js

npm

Angular cli

Features

Angular 21 + TypeScript

Angular Material, PrimeNG & Bootstrap 5

Code Splitting

Custom Hooks

RTL Support

Modular Structure

Custom Styling

Charts & Widgets

Fully Responsive

Cross Browser

File Structure

Installation Guide

Getting Started with Mentoring Angular Template

Prerequisites

Extract the Template

Install Dependencies

Start the Development Server

Build for Production

Install Additional Plugins

How to change Font ?

Dark Mode

Path: src/app/shared/data/data.service.ts

How can I switch to the Different Layouts?

Step 1: On the right, click the Gear symbol.

Step 2: You can find the layout code

How to convert LTR Template to RTL

Add Bootstarp RTL

Add Class in Body tag in index.html file

How to convert LTR Template to RTL

Add Bootstarp RTL

Add Class in Body tag in index.html file

FAQs

Can I use this platform on multiple domains?

I got a problem, How can I get support?

What does the support include?

Support

Don’t forget to Rate Smart HR!

License

Regular License

Extended License

Do you need a customized application for your business?

Don't Miss Out on the Benefits of Customization!

Thank You