Angular 20.3.x
Tailwind 4.1.17
LTR and RTL Supported
Angular Material
100+ Pages
JSON Datas
Lazy Loading
No Jquery
Font Awesome icons
Feather icons
RXJS
API Integrated Datas
Custom Design for DataTables
Fully Responsive Layout
Cross Browser Compatible
Easy to Customize
Clean & Well Commented Codes
Compatible to all Mobile Devices
Detailed Documentation
And Many More...
Project Overview
The project follows a modular structure with clear separation of concerns.
angular/
├── public/
│ ├── assets/
│ └── favicon.png
├── src/
│ ├── app/
│ ├── assets/
│ │ ├── index.html
│ │ ├── main.ts
│ │ ├── style.css
│ │ ├── tailwind.css
│ │ └── flowbite.d.ts
├── editorconfig
├── angular.json
├── browserslistrc
├── karma.conf.js
├── package.json
├── package-lock.json
├── README.md
├── tsconfig.app.json
├── tsconfig.json
└── tsconfig.spec.json
Node.js and NPM :
If NodeJS is not installed then download it from https://nodejs.org/. NPM comes bundled with Node.js. Recommended version: Node.js 24.0.0Angular-cli :
You can install angular-cli by executing from your command windownpm install -g @angular/cli. More details can be found here https://github.com/angular/angular-cli
If you have Angular CLI installed previously, update it to the latest Angular CLI. Remove the older version and re-install it.
npm uninstall --global @angular/clinpm install --global @angular/cli@20NPM Packages
- Before proceding you'll need to install npm packages. You can do this by running
npm installfrom the root of your project to install all the necessary dependencies.
npm install
Development Server
- Run
ng servefor a dev server. Navigate to localhost:4200/. The app will autometically reload if you change any of the source files.
ng serveBuild Project
- Run
ng buildto build the project. The build artifacts will be stored in thedist/directory. Use the--prodflag for a production build.
npm install -D tailwindcssnpx tailwindcss init -pEdit 'tailwind.config.js' and update the content paths as follows:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{html,ts}",
],
theme: {
extend: {},
},
plugins: [],
};
Install the Flowbite package to add interactive UI components and utilities for Tailwind CSS in the project.
npm i flowbiteUpdate the tailwind.config.ts
module.exports = {
content: [
"./src/**/*.{html,ts}",
"./node_modules/flowbite/**/*.js"
],
theme: {
extend: {},
},
plugins: [
require('flowbite/plugin')
],
};
In Angular.json add the flowbite script "node_modules/flowbite/dist/flowbite.min.js"