@a.nemreen/dga-cli

Install DGA UI on an Angular 19+ app, then generate a portal, pages, and a login stub.

This package is a dev-dependency. It does not ship to the browser.

Design system demo: nemreen.info/dga

How to use

1. Start from an Angular app

npm install -D @a.nemreen/dga-cli
ng add @a.nemreen/dga-cli

Wizard asks:

1. Direction — RTL (Arabic) or LTR
2. Brand color — green, blue, …
3. Font — IBM Plex, Cairo, …
4. Portal / dashboard / theme only
5. Starter page name (default home)

Then:

ng serve
# Nx: nx serve <project>

On screen: government top bar, header, footer, cookie banner, dark-mode button, AR/EN, home with a page hero.

Without the wizard (CI):

ng add @a.nemreen/dga-cli --skip-prompts --shell=portal --pageName=home --project=my-app

--skip-prompts alone is theme only (CSS + RTL). You must pass --shell=portal to get the chrome.

2. Add an inner page

ng generate @a.nemreen/dga-cli:page contact
# alias: ng g @a.nemreen/dga-cli:p contact

Opens at /contact. Same header/footer. Title + breadcrumbs come from dga-page-hero.

Form page from JSON:

ng generate @a.nemreen/dga-cli:page request --schema=./request.json

request.json must have a fields array (see Schema file below). This also installs @a.nemreen/dga-dynamic-form.

3. Add login

ng generate @a.nemreen/dga-cli:auth-module login

Opens at /login (dga-page-hero + dga-auth-card). Put your SSO in onLogin() in the generated component. This is not Nafath.

4. Use more DGA components yourself

After ng add, import from the public packages:

import { DgaButton, DgaCard, DgaPageHero } from '@a.nemreen/dga-ui';
import { DgaHeader } from '@a.nemreen/dga-ui/header';   // not the main barrel
import { DgaCookies } from '@a.nemreen/dga-ui/cookies';
import { DgaDatePicker } from '@a.nemreen/dga-ui/date-picker';
import { DgaThemeService, DgaLocaleService } from '@a.nemreen/dga-tokens';

Component gallery: nemreen.info/dga.

What ng add writes

| File | Role | |---|---| | package.json | @a.nemreen/dga-tokens, @a.nemreen/dga-ui, Tailwind v4 (or isolated v4 if the repo already has v3) | | app styles.css | @import 'tailwindcss' + tokens + @source so components are styled | | index.html | lang / dir / data-locale, Google Fonts, prefs-boot.js | | public/prefs-boot.js | Applies saved theme/locale before first paint | | app.config.ts | provideDgaLocales (Arabic + English) | | app/layout/shell.* | Only if you chose a portal/dashboard shell | | app/pages/<name>/ | Only if you chose a starter page |

Re-run is safe: existing lines are merged, not duplicated.

Nx

ng add @a.nemreen/dga-cli --project=my-app
nx serve my-app
nx g @a.nemreen/dga-cli:page contact --project=my-app

If the workspace already uses Tailwind 3, this app gets its own PostCSS + a nested Tailwind 4 import. Other apps stay on v3.

Do not run ng add on an app that is already on DGA (for example Marsad). Use page / auth-module only.

Commands (reference)

| Command | Result | |---|---| | ng add @a.nemreen/dga-cli | Install + optional shell/page | | ng g @a.nemreen/dga-cli:portal-shell | Portal or dashboard layout | | ng g @a.nemreen/dga-cli:page <name> | Routed page with page hero | | ng g @a.nemreen/dga-cli:page <name> --schema=./form.json | Page + dynamic form | | ng g @a.nemreen/dga-cli:auth-module login | Login page | | --dry-run | Print files, write nothing |

ng-add flags

| Flag | Default | Meaning | |---|---|---| | --rtl | true | lang=ar dir=rtl (false → English LTR) | | --brand | green | green blue purple gold teal hajj foundation national | | --font | ibm-plex | ibm-plex noto-sans cairo tajawal almarai changa readex-pro amiri | | --project | first app | Angular CLI or Nx project name | | --shell | none (wizard: portal) | none portal dashboard | | --pageName | unset | Also generate this page | | --skipInstall | false | Do not run npm install | | --skipPrompts | false | No wizard |

portal-shell flags

| Flag | Default | Meaning | |---|---|---| | --appearance | portal | portal or dashboard | | --brandName | المنصة | Header / footer label | | --registrationId | 00000000000 | DGA platform license on the top bar | | --path | <sourceRoot>/app/layout | Where to put shell.component |

Schema file (--schema)

{
  "emitOnly": true,
  "submitButtonLabel": { "en": "Send", "ar": "إرسال" },
  "fields": [
    {
      "name": "subject",
      "type": "text",
      "label": { "en": "Subject", "ar": "الموضوع" },
      "required": true
    }
  ]
}

fields is required. Types follow DgaDynamicFormConfig in @a.nemreen/dga-dynamic-form.

License

MIT — see LICENSE.