🦷 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 main @ 934a911 (post-v2.4.0) (payload version 2.20) — 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-Odontogram-Modul

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
• 🔗 HL7 FHIR R4 export/import; JSON export/import with migrations — round-trip compatible with react-advanced-odontogram
• 🖼️ 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 seven 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
• 💾 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 — the original React implementation this package is a port of; the clinical engine (dental status logic, periodontal charting, 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.