Angular + Tailwind Template

🚀 Enterprise-ready Angular 19 template with Tailwind CSS, 25+ features, and complete dark mode support.

🌐 Live Demo

🔗 View Live Demo

Experience all features live: Dark mode, components, authentication, state management, and more!

✨ Features

🎨 UI Components

• Button Component - Multiple variants (primary, secondary, danger, success, outline), sizes, and states
• Modal Component - Confirmation, info, and delete modals with service integration
• Toast Notifications - Success, error, warning, and info toasts with animations
• Icon Component - 13+ Heroicons with customizable sizes and colors
• Table Component - Sortable, paginated, filterable with sticky headers
• Loading Spinner - Elegant spinner with fade-in animations
• Skeleton Loader - Content placeholders for loading states
• Theme Toggle - Sun/Moon icon with smooth transitions

🔧 Directives & Pipes

• HighlightDirective - Hover effects with customizable colors
• TooltipDirective - Smart positioning with viewport boundary detection
• ClickOutsideDirective - Detect clicks outside elements
• HighlightPipe - Text highlighting with search terms
• TimeAgoPipe - Relative time display (e.g., "2 hours ago")
• TruncatePipe - Text truncation with ellipsis
• FormatNumberPipe - Number formatting with localization

🌙 Dark Mode

• Signal-based Theme Service - Reactive theme state management
• Persistent Theme - localStorage integration
• Full Coverage - All components support dark mode
• Smooth Transitions - Animated theme switching

🏗️ Architecture & Infrastructure

• Enterprise Structure - Features, core, shared, store, layouts, models, constants, utils
• Authentication - JWT-based auth with guards and interceptors
• API Service - Centralized HTTP client with error handling
• State Management - NgRx store with effects and selectors
• Error Handling - Global error handler with logging service
• Loading State - Automatic loading indicators with interceptor
• Feature Flags - Runtime feature toggles for A/B testing
• Breadcrumb Service - Dynamic breadcrumb navigation
• Retry Logic - Automatic HTTP retry with exponential backoff

🧪 Angular CDK Integration

• Virtual Scrolling - Efficient rendering of large lists (10,000+ items)
• Drag & Drop - Sortable lists with visual feedback

🌐 Internationalization

• Multi-language Support - English and German translations
• 500+ Translation Keys - Comprehensive i18n coverage
• Language Switcher - Runtime language switching

📱 Demo Pages

• Home - Hero section with gradient and feature cards
• Components Demo - Interactive showcase of all components
• Features Demo - Table with pipes, directives, and filtering
• API Demo - CRUD operations with error handling
• Virtual Scroll Demo - Performance demo with 10,000 items
• Drag & Drop Demo - Interactive list sorting
• Login - Authentication demo page
• Admin Module - Lazy-loaded admin dashboard (users, settings)
• 404 Page - Stylish error page

🚀 Getting Started

Prerequisites

• Node.js: 20.19.4 (see .nvmrc)
• npm: 10.x or higher

Installation

# Clone the repository
git clone https://github.com/heyding/angular-tailwind-template.git

# Navigate to project
cd angular-tailwind-template

# Install dependencies
npm install

# Copy environment file
cp .env.example .env

# Start dev server
npm start

Visit http://localhost:4200 🎉

🐳 Docker Deployment

Local Docker Testing

# Build Docker image
docker build -t angular-tailwind-template .

# Run container
docker run -p 8080:80 angular-tailwind-template

# Or use docker-compose
docker-compose up

Visit http://localhost:8080 to test the production build.

Deploy to Digital Ocean

See the complete Deployment Guide for:

• 🚀 One-click deployment to Digital Ocean App Platform
• 🔄 GitHub Actions CI/CD pipeline
• 🌐 Custom domain setup
• 📊 Monitoring and scaling

Quick Deploy:

# Install doctl CLI
brew install doctl  # macOS
# or download from https://docs.digitalocean.com/reference/doctl/

# Authenticate
doctl auth init

# Deploy
doctl apps create --spec .do/app.yaml

📦 Available Scripts

# Development server (http://localhost:4200)
npm start

# Production build
npm run build

# Run tests
npm test

# Code formatting
npm run format

# Linting
npm run lint

🏗️ Project Structure

src/app/
├── core/                    # Singleton services, guards, interceptors
│   ├── guards/             # AuthGuard
│   ├── interceptors/       # Auth, Error, Loading, Retry
│   ├── services/           # API, Auth, Theme
│   ├── handlers/           # Global error handler
│   ├── models/             # Core interfaces
│   ├── header/             # Header component
│   └── footer/             # Footer component
├── features/               # Feature modules
│   ├── home/              # Home feature (pages, components, store)
│   └── admin/             # Admin feature (lazy-loaded)
├── shared/                 # Reusable components, directives, pipes
│   ├── components/        # Button, Modal, Toast, Table, Icon, etc.
│   ├── directives/        # Highlight, Tooltip, ClickOutside
│   ├── pipes/             # TimeAgo, Truncate, FormatNumber, Highlight
│   ├── services/          # Modal, Toast, Loading, Logger, FeatureFlags
│   └── models/            # Shared interfaces
├── store/                  # NgRx global state
├── layouts/                # Layout components (future)
├── models/                 # Global interfaces
├── constants/              # App constants
└── utils/                  # Helper functions

🎨 Component Usage

Button Component

import { ButtonComponent } from '@shared/components/button/button.component';

// In template
<app-button [variant]="'primary'" [size]="'md'" (clicked)="handleClick()">
  Click Me
</app-button>

Toast Notifications

import { ToastService } from '@shared/services/toast.service';

constructor(private toastService: ToastService) {}

showSuccess() {
  this.toastService.success('Operation completed!');
}

Modal Service

import { ModalService } from '@shared/services/modal.service';

constructor(private modalService: ModalService) {}

async confirmDelete() {
  const result = await this.modalService.confirm({
    title: 'Delete Item',
    message: 'Are you sure?'
  });
  
  if (result) {
    // User confirmed
  }
}

Dark Mode

import { ThemeService } from '@core/services/theme.service';

constructor(private themeService: ThemeService) {}

toggleTheme() {
  this.themeService.toggleTheme();
}

getCurrentTheme() {
  return this.themeService.theme(); // Signal
}

🎯 Demo Pages

Navigate to these routes to see features in action:

• / - Home page with hero section
• /components - All components showcase
• /features - Features demo with table
• /api - API integration demo
• /login - Authentication demo
• /virtual-scroll - Virtual scrolling demo
• /drag-drop - Drag & drop demo
• /admin - Admin dashboard (lazy-loaded)

⚙️ Configuration

Tailwind CSS

Customize theme in tailwind.config.ts:

module.exports = {
  darkMode: 'class', // Enable dark mode
  theme: {
    extend: {
      colors: {
        // Add custom colors
      }
    }
  }
}

Environment Variables

See .env.example for available configuration options:

API_BASE_URL=http://localhost:3000
FEATURE_FLAG_DARK_MODE=true
LOG_LEVEL=debug

Translations

Add new languages in src/assets/i18n/:

• en.json - English translations
• de.json - German translations

🧪 Testing

# Run all tests
npm test

# Run tests in watch mode
npm run test:watch

# Generate coverage report
npm run test:coverage

📝 Best Practices

• ✅ Standalone Components - All components use standalone API
• ✅ Signals - Reactive state with Angular Signals
• ✅ Functional Guards - Modern functional guard syntax
• ✅ Strict TypeScript - Type safety enabled
• ✅ Mobile-First - Responsive design approach
• ✅ Accessibility - ARIA labels and keyboard navigation
• ✅ Performance - Lazy loading, OnPush change detection
• ✅ Code Style - Prettier + ESLint

🚀 Deployment

Production Build

npm run build

Output in dist/angular-tailwind-template/

Docker Support (Coming Soon)

# Future: Dockerfile for containerized deployment

🤝 Contributing

Contributions are welcome! Please:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit changes (git commit -m 'feat: add amazing feature')
4. Push to branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is open source and available under the MIT License.

🔗 Resources

• Angular Documentation
• Tailwind CSS
• NgRx Documentation
• Heroicons
• Angular CDK
• ngx-translate
• Digital Ocean App Platform
• Deployment Guide

🙏 Acknowledgments

• Angular Team - Amazing framework
• Tailwind Labs - Beautiful utility-first CSS
• NgRx Team - Powerful state management
• Heroicons - Gorgeous SVG icons

---

Made with ❤️ by Tommy Heyding