DreamsTour offers powerful admin template and modern interface.
- Angular 21.x
- Bootstrap 5.3.8
- Angular Material
- JSON Datas
- Lazy Loading
- No Jquery
- RXJS
- API Integrated Datas
- Font Awesome icons
- Feather icons
- Fully Responsive Layout
- Cross Browser Compatible
- Easy to Customize
- Clean & Well Commented Codes
- Compatible to all Mobile Devices
- Detailed Documentation
- Developer Friendly
- And Many More...
Project Overview
The project follows a modular structure with clear separation of concerns.
angular/
├── public/ # Static assets (favicon, images, etc.)
├── src/
│ ├── assets/ # Images, icons, styles (scss/, css/)
│ ├── app/
│ │ ├── auth/ # Authentication pages
│ │ ├── error/ # Error pages
│ │ └── features/ # Main pages Directory(404,500)
│ │ ├── 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
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
DreamsTour/angular/template or template-rtl(the source code folder).
Install Dependencies
-
Open a terminal/command prompt in the
Angularfolder. -
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/template or template-rtlfolder, ready to deploy.
Install Additional Plugins
-
To add a new package (e.g., a chart library), run:
npm install package_name -
Replace
package_namewith the actual npm package you want to add.
- 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
sudofor global installs. - For Windows users, run your terminal as Administrator if you encounter permission issues.
-
Refer to the
README.mdin the project root for more usage and customization details.
You will see a Light mode and Dark mode button in the header. Choose any one of the option to change website theme.
Light Mode
Dark Mode
If you need to set static Theme to your template please add a class="dark-mode" in
<html class="dark-mode"></html>
at index.html.
-
Step:1 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"
Step 2: Applying RTL Direction to html
Explanation: The direction: rtl; property is applied to the "html" element.This ensures that the entire content of the page flows from right to left.
The styles for the custom cursor are located in the cursor.scss file. You can find this file in the following directory:
Path: scss/components/cursor.scss
Cursor Html code:
<div class="xb-cursor tx-js-cursor" [ngClass]="{ 'is-active': isHovered }">
<div class="xb-cursor-wrapper">
<div class="xb-cursor--follower xb-js-follower"> </div>
</div>
</div>
The script for the custom cursor are located in the feature.tsx file. You can find this file in the following directory:
Path: src/feature-module/feature-module.component.html
You can also disable the custom cursor by commenting out or removing the Cursor component from your code.
The loader can be fully customized to align with your brand, including color, animation style, size, and duration.
Loader Html code:
<div id="loader-wrapper" >
< div id="loader">
<span className="loader-line" > </span>
</div>
</div>
The script for the custom loader are located in the feature.tsx file. You can find this file in the following directory:
Path: src/feature-module/feature-module.component.ts
You can also disable the custom Loader by commenting out or removing the Cursor component from your code.
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.
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 DreamsTour!
DreamsTour 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?
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.
| NAME | URL |
|---|---|
| Bootstrap | https://getbootstrap.com/docs/ |
| Apex charts | https://www.npmjs.com/package/ng-apexcharts |
| 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/ |
| Full Calendar | https://www.npmjs.com/package/@fullcalendar/angular |
| Lightbox | https://www.npmjs.com/package/ngx-lightbox |
| Scrollbar | https://www.npmjs.com/package/ngx-scrollbar |
| lightgallery | https://www.npmjs.com/package/lightgallery |
| Counterup | https://www.npmjs.com/package/ngx-countup |
Need Support?
If this documentation does not address your questions, please feel free to contact us via email at support@dreamstechnologies.com
Reach the team at GMT+5:30. Typical reply within 12–24 hours on weekdays — rarely up to 48 hrs during holidays. Support is available to verified buyers for template-related issues.
Contact SupportImportant 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.
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 your project isn't another cookie-cutter solution but 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.
Thank You
Thank you once again for downloading DreamsTour.
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.