🦷 Angular Advanced Odontogram

📖 Documentation per language: 🇬🇧 English · 🇭🇺 Magyar · 🇩🇪 Deutsch · 🇪🇸 Español · 🇫🇷 Français · 🇮🇹 Italiano · 🇵🇱 Polski · 🇧🇷 Português (BR) · 🇸🇰 Slovenčina · 🇷🇺 Русский · 🇸🇦 العربية · 🇨🇳 简体中文

An interactive, SVG-based dental odontogram (dental chart) editor for Angular + TypeScript — with a full periodontal charting module, multi-surface caries/restorations, endodontic/prosthetic states, FDI/Universal/Palmer numbering, HL7 FHIR R4 export/import, optional ICDAS scoring, and a 12-language UI.

This is the official Angular port of React Advanced Odontogram (npm: react-advanced-odontogram). Feature parity with react-advanced-odontogram v2.6.0 (engine 215c43a), payload 2.22 — JSON and FHIR R4 exports round-trip between the two libraries. The clinical engine is shared, verbatim; only the component shell is Angular-native. Versioned in lockstep with the React module.

🔗 Live demo: https://angular-advanced-odontogram.vercel.app/
⚛️ Original React project: https://github.com/ZoliQua/React-Advanced-Odontogram

Screenshot from the original React project — the Angular port renders the identical UI.

📦 Installation

npm install angular-advanced-odontogram

Requirements: Angular 21.2+ (peer dependency); a bundler that supports the exports field and ESM (the Angular CLI qualifies out of the box). The package is ESM-only.

🚀 Quick start

Register the stylesheet once (e.g. in angular.json) and render OdontogramShellComponent:

"styles": [
  "node_modules/angular-advanced-odontogram/styles.css",
  "src/styles.css"
]

import { Component } from "@angular/core";
import { OdontogramShellComponent } from "angular-advanced-odontogram";

@Component({
  selector: "app-chart",
  imports: [OdontogramShellComponent],
  template: `<aao-odontogram-shell language="en" numberingSystem="FDI" [darkMode]="false" />`,
})
export class ChartComponent {}

✨ Highlights

• 🦷 Permanent / primary / implant / missing teeth; substrate, restorations (crown/inlay/onlay/veneer/bridge × materials), removable & implant prosthetics
• 🔍 Multi-surface caries & fillings (ICDAS / CARS severity, root & radiographic caries), endo & AAE pulp diagnosis, apical diagnosis, peri-implant status, wear, discoloration, orthodontics
• 🩺 Full periodontal module — per-site probing, CAL/recession/%BOP, a graphical full-mouth perio chart, 2017 staging/grading, FHIR export and import
• 🔗 HL7 FHIR R4 export/import; JSON export/import with migrations — round-trip compatible with react-advanced-odontogram
• 🧬 Standards-based diagnosis coding — WHO ICD-10 always on, per-tooth diagnoses (Diagnoses card) and case/regional diagnoses (Diagnoses pop-up), selectable national packs (BNO-10, US ICD-10-CM), an opt-in SNOMED CT overlay, and full FHIR Condition export/import round-trip
• 🖼️ PNG / JPG / SVG chart export and a configurable PDF report (jsPDF) — multilingual PDF fonts (Arabic shaping, CJK), per-tooth notes
• 🧱 Composable UI — beyond the all-in-one shell, OdontogramUiService, the four presentational surfaces and all eight declarative control cards are individually exported for custom host layouts
• 🦴 Selectable tooth anatomy profile — classic (default) or measured (nine literature-measured tooth templates), switchable at runtime; both the 11 non-English UI languages and the measured artwork load on demand, not in the main bundle
• 💾 Opt-in localStorage persistence API (host-wired, off by default)
• 🔢 FDI / Universal / Palmer numbering · 🌐 12 UI languages (HU/EN/DE/ES/IT/SK/PL/RU/PT-BR/AR/ZH/FR, Arabic RTL) · 🎨 theming via --odon-* CSS variables · 🧩 plugin system · ⌨️ keyboard accessibility

📖 Full documentation, the composable API, DI seams, testing and the public API reference: lang/README-en.md

📄 License & citation

MIT © Zoltán Dul. This library is a port of React Advanced Odontogram; if you use it in research, please cite the original project — see its CITATION.cff and the Zenodo record.

🙌 Credits

Angular Advanced Odontogram is created and maintained by Zoltan Dul (@ZoliQua), the creator and lead developer of this port and of the underlying clinical engine.

Original project: React Advanced Odontogram (npm: react-advanced-odontogram) — the original React implementation this package is a port of; the clinical engine (dental status logic, periodontal charting, diagnosis coding, FHIR export/import, i18n strings, tour, SVG templates) is shared, verbatim.

Built with jsPDF, DOMPurify, Angular, Angular CLI, TypeScript and Tailwind CSS.

If this project is useful to you, please star it on GitHub.