Why Angular 20 — A Framework Built for Enterprise Systems

Choosing a frontend framework for an ERP system is not the same as choosing one for a typical website. An ERP system demands a framework that supports large-scale projects, offers a clear and opinionated structure, can be maintained long-term, and has a robust ecosystem -- Angular 20 checks every box.

Key strengths of Angular 20 that make it ideal for ERP:

• Standalone Components -- NgModules are no longer required, resulting in a cleaner code structure. Each component is self-contained and can be lazy-loaded immediately, reducing bundle size and improving page load speed.
• Signal-based Reactivity -- A new reactivity system that replaces the legacy Zone.js approach, enabling more precise and efficient UI updates, especially on data-heavy screens such as report tables with thousands of rows.
• SSR/SSG built-in -- Built-in support for Server-Side Rendering and Static Site Generation without additional packages, improving initial page load performance.
• TypeScript strict mode -- Running TypeScript in strict mode helps prevent bugs from typos or incorrect types, which is critical for an ERP codebase of this scale.

When compared with the legacy system (ZK Framework), the differences are striking:

Criteria	Legacy System (ZK Framework)	Angular 20
UI/UX	Desktop-application-style UI on the web; outdated appearance; difficult to customize	Modern UI; fully customizable; supports Dark/Light Mode
Performance	Primarily server-side rendering; slow with large datasets	SPA (Single Page Application); fast loading with Lazy Loading and Virtual Scrolling
Responsive	No mobile support; desktop-only display	Fully responsive across Desktop, Tablet, and Mobile
Ecosystem	Small developer community; limited component libraries	Large community with numerous component libraries (PrimeNG, Angular Material, etc.)
Maintainability	Difficult to find skilled developers; niche technology	Easy to recruit developers; extensive documentation and large community

PrimeNG 20 — An Enterprise-Grade UI Component Library

With Angular 20 chosen as the framework, the next question was which UI Component Library to use -- Angular Material or PrimeNG. The answer was PrimeNG 20.

Why PrimeNG was chosen over Angular Material:

• Comprehensive enterprise components -- PrimeNG offers over 80 components covering every need of an ERP system, while Angular Material focuses on Material Design, which is better suited for general-purpose applications.
• Enterprise-grade DataTable -- Supports Sorting, Filtering, Lazy Loading, Virtual Scrolling, Row Grouping, Column Reordering, and Export to Excel/PDF -- all essential features for ERP reports containing tens of thousands of rows.
• Flexible theme system -- Allows full theme customization, including instant Dark/Light Mode switching.
• TreeTable -- Displays hierarchical data, which is essential for the Chart of Accounts and organizational structures.

Commonly used components across Saeree ERP modules:

Module	PrimeNG Components Used	Example Usage
e-Report	DataTable + Chart	Financial, accounting, and inventory reports with visual charts; exportable to both Excel and PDF
KPI Dashboard	Chart + Card	Real-time KPI visualization using Bar Charts, Pie Charts, and summary Cards
Budget Approval	Stepper + Dialog	Step-by-step approval workflow display with confirmation Dialogs
Chart of Accounts	TreeTable + Dropdown	Hierarchical chart of accounts display with expandable/collapsible nodes
Budget Calendar	Calendar + DataTable	Budget cycle visualization in calendar format with detailed data tables

Bootstrap 5 + PrimeNG — How They Work Together

You might wonder why both Bootstrap 5 and PrimeNG are used in the same project. The answer is that each serves a distinctly different purpose, and they do not conflict with each other.

• Bootstrap 5 handles layout -- Grid System (12 columns), Spacing (margin, padding), Typography, Responsive Breakpoints -- everything related to page layout and structure.
• PrimeNG handles components -- Table, Form, Dialog, Chart, Calendar, Stepper -- everything that is an interactive UI component.

This clear separation of responsibilities provides several benefits:

• No CSS conflicts -- Bootstrap manages layout while PrimeNG manages components, with no overlap between them.
• Developer familiarity -- Bootstrap is a CSS framework most developers already know, eliminating the need to learn a new grid system.
• Easier maintenance -- When upgrading Bootstrap or PrimeNG to newer versions, each can be upgraded independently without affecting the other.

Dark Mode / Light Mode — More Than Just Aesthetics

The new version of Saeree ERP supports both Dark Mode and Light Mode, allowing users to choose their preferred display theme.

Implementation approach:

• CSS Variables -- Colors, font sizes, spacing -- everything is defined as CSS Variables that can be switched instantly based on the active theme.
• PrimeNG Theme System -- PrimeNG 20 provides a Theme API that supports runtime theme switching without requiring a page reload.
• prefers-color-scheme -- The system detects the user's OS-level color scheme preference via media queries and applies it as the default.
• User preference in localStorage -- Once a user selects a theme, the preference is saved to localStorage so it persists across sessions.

Benefits of Dark Mode in an ERP system:

• Reduced eye strain -- Staff who work in the ERP system all day benefit from reduced light exposure, helping to prevent eye fatigue and headaches.
• OLED battery savings -- On devices with OLED displays (certain tablets and laptops), Dark Mode can save 30-60% of display power consumption.
• Improved accessibility -- Users with vision sensitivity or light sensitivity can switch to Dark Mode for a more comfortable experience.

Multi-Language Support (Thai + English)

The new version of Saeree ERP for TGO supports two languages: Thai and English, with instant language switching that requires no page reload.

Technologies used:

• @ngx-translate/core -- The most widely used internationalization (i18n) library for Angular.
• JSON Translation Files -- Each language has its own JSON file containing translations for every text string in the system.
• Dynamic Language Switching -- Users can toggle the language instantly, and all labels, messages, and table headers change simultaneously.

Why is multi-language support critical for TGO?

TGO works continuously with international organizations, including the UNFCCC (United Nations Framework Convention on Climate Change), global carbon markets, and international environmental agencies. Having English language support in the system enables:

• Instant export of English-language reports for international conferences and meetings.
• Direct system access for international experts and partners without requiring manual translation.
• Compliance with international reporting standards that require data to be presented in English.

Overall Architecture

An overview of the Saeree ERP system architecture after the upgrade:

Layer	Technology	Details
Frontend	Angular 20 + PrimeNG 20 + Bootstrap 5	SPA (Single Page Application) running in the browser; supports both Desktop and Mobile
Backend	REST API (Saeree ERP Backend)	The existing Saeree ERP backend serving data through REST APIs
Database	PostgreSQL	The original Saeree ERP database with over 14 years of data; no migration required
Authentication	SSO + 2FA	Single Sign-On integrated with other organizational systems, plus Two-Factor Authentication for enhanced security
Security	SSL A+ / HTTPS	Achieved A+ rating on SSL tests; all connections are fully encrypted

The entire system runs in the browser across Desktop and Mobile (Responsive) -- staff can review reports, approve documents, or check the KPI Dashboard from their phones anytime, anywhere.

Summary

The major upgrade for TGO (Thailand Greenhouse Gas Management Organization) was not merely a visual refresh -- it was a full technology stack modernization, moving from the legacy system to Angular 20 + PrimeNG 20 + Bootstrap 5 with Dark Mode, Multi-Language support, and a cleanly separated Frontend/Backend architecture.

Key technical gains from this upgrade:

• Modern UI/UX -- From a desktop-application-style interface to a fully responsive web application.
• Improved performance -- Signal-based Reactivity, Lazy Loading, and Virtual Scrolling.
• High maintainability -- TypeScript strict mode, Standalone Components, and an easier talent pool to recruit from.
• Future-ready -- Angular has a clear release cycle with Long-Term Support.

In the next installment (Episode 3), we will dive into the Document Approval Workflow -- a step-by-step approval system designed specifically for TGO, integrated with the e-Office system.

"Technology changes every 3-5 years, but an organization's data must endure forever -- the key to a successful upgrade is modernizing the frontend while keeping every single record fully intact."

- Saeree ERP Team

Interested in frontend technology consulting for your organization's ERP system? You can schedule a demo or contact our consulting team to assess your organization's readiness.