Getting Started

Introduction

Item Name

Dreams EMR - Electronic Medical Record Admin Dashboard Template

Item Version
v1.0.3
Author
Dreams Technologies
Support Email
[email protected]
Dreams EMR

Dreams EMR - Electronic Medical Record Admin Dashboard Template

A modern, feature-rich Angular-based Electronic Medical Record system designed for healthcare professionals.

Contact Support Create Support Ticket

System Requirements

Node.js

Version 24.x or later

npm

Version 11.x or later

Web Browser

Chrome, Firefox, Edge, Safari

Features

Angular 20 + 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/ 
│ 	│	├── auth/          		 # Authentication pages (login,signin)
│   │   └── error/ 		   		 # Error pages (404,500)
│   │   └── features/ 	   		 # Main pages Directory(404,500)
│	│   │   ├── Application/     # Application pages 
│	│   │   ├── common/     	 # Common Components like header, sidebar,layout pages
│	│   │   ├── dashboard/     	 # Dashboard pages and charts
│	│   │   ├── healthcare/      # Doctor ,Patients,vists,Appointment pages
│	│   │   ├── manage/      	 # Notification, Settings,Staffs pages
│	│   │   ├── pages/  		 # pages Module
│	│   │   ├── modal-dashboard/ # Layout pages
│	│   │   └── ui-interface/  	 # UI components and examples
│   │	├── shared/				 # Shared services
│   │   ├── app.config.ts/       
│   │   ├── app.html/          	 
│   │   ├── app.routes.ts/       
│   │   ├── app.scss/         
│   │   └── app.ts/         
├── editorconfig                 
├── gitignore                  	  
├── angular.json
├── package.json                  
├── README.md
├── tsconfig.app.json
├── tsconfig.json
└── tsconfig.spec.json

Installation Guide

Getting Started with Dreams EMR Angular Template
Prerequisites
  • Node.js (v24 or later recommended). Download Node.js
  • npm (comes with Node.js)
  • Any modern web browser (Chrome, Firefox, Edge, Safari, etc.).
Extract the Template
  • After downloading, unzip the template package.
  • Navigate to Dreams EMR/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 the Angular Project Works

This Angular project is designed for scalability, maintainability, and rapid development. Here's how the main features and flows work:

App Entry

The app starts from src/index.html, which sets up the root Angular component, services and features.

State Management

Uses common components (theme, sidebar, user, etc.), ease of use.

Theming & RTL

Theme settings (light/dark, layout, direction) are managed in layouts components.

Routing

All routes are defined in src/app/app.routes.ts/. The app uses lazy loading for code-splitting.

Authentication

Full authentication flows (login, register, password reset, etc.) are implemented in src/pages/authentication/.

Dashboard & Widgets

The dashboard and widgets (charts, tables, stats) are in src/app/features/dashboard/.

UI Components

Reusable UI elements (sidebar, header, tables, etc.) are in src/components/ and styled with Bootstrap 5, Angular Material.

Modular Design: The project is modular, so you can easily add new pages, features, or languages as your app grows.

How to change Font ?

You can change the font in your Angular project by following these detailed steps:

  1. Choose a Font:
    • Visit Google Fonts or another font provider and select your desired font (e.g., Inter, Roboto, etc.).
  2. Add the Font Import to Your CSS:
    • Copy the @import statement provided by Google Fonts.
    • Paste it at the very top of your main CSS file (e.g., src/assets/css/style.css or src/assets/scss/main.scss):
    @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
  3. Update the font-family in CSS:
    • In the same CSS file, set the font-family for the body (or a specific class/component):
    body {
  font-family: 'Inter', sans-serif;
}
  4. You can also target specific elements or classes if you want to use different fonts in different places.
  5. Save and Check Your App:
    • Save your CSS file and reload your app in the browser. The new font should be applied site-wide or wherever you specified.
Tips:
  • For best performance, only import the font weights/styles you actually use.
  • Keep your font imports in one place (usually your main CSS file).
  • Test your font on different browsers and devices for consistency.

How to change Layouts ?

Theme Settings in this Project let you customize the look and feel of the interface instantly. You can access the Theme Settings panel by clicking the settings (gear) icon, usually found in the top bar or sidebar of the app.

  • Where to find it: The Theme Settings panel is implemented as ThemeSettings (located at src/app/features/shared/settings.ts). It can be opened from the UI by clicking the settings icon.
  • How it works: When you change a setting in the panel, it updates the app's Redux state and saves your preferences to localStorage. The app then updates the <html> element's attributes (like data-layout, data-sidebar, etc.), so the CSS can apply the correct styles immediately.

Available Layout Options:

  • default – Standard sidebar and topbar layout
  • mini – Collapsed sidebar for more content space
  • hoverview – Sidebar expands on hover
  • hidden – Sidebar is hidden
  • full-width – Content uses the full width of the screen

Sidebar Color Options:

  • light – Light sidebar
  • sidebar2 to sidebar7 – Various preset sidebar color themes
  • gradientsidebar1 to gradientsidebar7 – Gradient sidebar color themes

Topbar Color Options:

  • white – White topbar
  • topbar1 to topbar6 – Preset topbar color themes
  • gradienttopbar1 to gradienttopbar7 – Gradient topbar color themes

Theme Color Options:

  • primary (default)
  • secondary
  • orange
  • teal
  • purple
  • indigo
  • info

You can also switch between Light and Dark modes, adjust the content width (fluid or boxed), and set the text direction (ltr or rtl) from the same panel. All changes are applied instantly and saved for your next visit.

How to use RTL (Right-to-Left) Support?

RTL (Right-to-Left) support allows your app to display content right to left. The layout and text direction automatically switch when a RTL is added.

  • How to enable: Add a node_modules/bootstrap/dist/css/bootstrap.rtl.min.css in angular.json and Add dir="rtl" in index.html <html> element

How to use Dark Mode?

Dark Mode lets users switch the app's appearance to a darker color scheme, which is easier on the eyes in low-light environments.

  • How to enable: Open the Theme Settings panel (settings icon) and select Dark mode. This sets data-bs-theme="dark" on the <html> element.
  • Where to find: Dark mode logic is handled in the settings.ts component and Redux theme slice. The CSS uses the data-bs-theme attribute to apply dark styles.

Your dark mode preference is saved and will be remembered next time you visit the app.

Code Example:

											// Enable dark mode via ThemeSettings handler
 public themeColor: BehaviorSubject<string> = new BehaviorSubject<string>(
      localStorage.getItem('themeColor') || 'light'
    );
// Or manually set attribute:
document.documentElement.setAttribute('data-bs-theme', 'dark');

How to use Lazy Routing?

Lazy Routing improves performance by loading route components only when they are needed, reducing the initial bundle size.

  • How to add a lazy route: Import your component with {path:'Component_name',loadComponent:()=> import ('./Component_name').then((m)=>m.Component_name)}.

Lazy loading routes helps your app load faster and improves the user experience, especially for large projects.

Code Example:

 {
        path:'auth',loadComponent:()=>import('./auth/auth').then((m)=>m.Auth),
        children:[
           {path:'login',loadComponent:()=> import ('./auth/login/login').then((m)=>m.Login)}, 
			]
		}

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 Dreams EMR!
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

Dreams Emr 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.

Credits

Library / Tool URL
Bootstrap https://getbootstrap.com/docs/
Apex charts https://www.npmjs.com/package/ng-apexcharts
Fontawesome https://www.npmjs.com/package/@fortawesome/fontawesome-free
Ngx Bootstrap https://www.npmjs.com/package/ngx-bootstrap
Editor https://www.npmjs.com/package/ngx-editor
Rxjs https://www.npmjs.com/package/rxjs
Angular Material https://material.angular.io/
Clipboard https://www.npmjs.com/package/ngx-clipboard
Lightbox https://www.npmjs.com/package/ngx-lightbox
Ngx Mask https://www.npmjs.com/package/ngx-mask
Scrollbar https://www.npmjs.com/package/ngx-scrollbar

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
dreamstechnologies [email protected]
thanks

Thank You

Thank you once again for downloading Dreams Emr.
We hope you're enjoying your experience, and we kindly request that you take a moment to share your valuable review and rating with us.

Review Link:https://themeforest.net/downloads