https://github.com/hebus/ngx-call
Imperative, type-safe, promise-based dialogs & overlays for Angular — the Angular counterpart of react-call's createCallable.
https://github.com/hebus/ngx-call
angular angular-library createcallable dialog imperative modal ngx overlay promise react-call signals typescript
Last synced: 2 days ago
JSON representation
Imperative, type-safe, promise-based dialogs & overlays for Angular — the Angular counterpart of react-call's createCallable.
- Host: GitHub
- URL: https://github.com/hebus/ngx-call
- Owner: hebus
- Created: 2026-06-20T10:07:09.000Z (17 days ago)
- Default Branch: main
- Last Pushed: 2026-06-20T11:14:16.000Z (17 days ago)
- Last Synced: 2026-06-20T12:28:11.535Z (17 days ago)
- Topics: angular, angular-library, createcallable, dialog, imperative, modal, ngx, overlay, promise, react-call, signals, typescript
- Language: TypeScript
- Homepage: https://hebus.github.io/ngx-call/
- Size: 166 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- fucking-awesome-angular - ngx-call - Imperative, type-safe, and promise-based dialogs for Angular, inspired by <b><code> 1285⭐</code></b> <b><code> 21🍴</code></b> [React Call](https://github.com/desko27/react-call))'s `createCallable`. (Third Party Components / Modals)
- awesome-angular - ngx-call - Imperative, type-safe, and promise-based dialogs for Angular, inspired by [React Call](https://github.com/desko27/react-call)'s `createCallable`. (Third Party Components / Modals)
README
# ngx-call
> Imperative, type-safe, promise-based dialogs & overlays for Angular — the Angular counterpart of [react-call](https://github.com/desko27/react-call)'s `createCallable`.
**[▶ Live demo & 21 examples → hebus.github.io/ngx-call](https://hebus.github.io/ngx-call/)**
Call a dialog like a function. Await a confirm, resolve a value — no template wiring, no boilerplate.
```typescript
// 1 — bind any component, once
export const Confirm = createCallable<{ message: string }, boolean>(ConfirmDialog);
// 2 — call it like a function, anywhere
const ok = await Confirm.call({ message: "Delete this item?" });
// ^ resolves to boolean — fully typed
```
## Features
- **Imperative API** — `call`, `upsert`, `update`, `end`, `setRoot`, mirroring react-call's full surface.
- **Type-safe** — arguments and the resolved value are typed end-to-end.
- **Promise-based** — `await` any overlay; each call stacks an independent instance.
- **Zero dependencies** — built on Angular signals and DI.
- **Anything overlay-shaped** — confirms, prompts, toasts, drawers, command palettes, wizards… see the [demo](https://hebus.github.io/ngx-call/).
## How it differs from react-call
Beyond the obvious Angular-vs-React: **react-call is headless** — it gives you the callable/stacking mechanism and you render and style the overlay yourself. ngx-call keeps that same headless engine (`createCallable`, `injectCallRef`, stacking, `closeAll`) **and** ships optional UI primitives built directly on web-platform standards:
- **Native `` element** — the `Dialog` wrapper drives the real element via `showModal()` / `show()`, so you get the browser **top layer**, the native `::backdrop`, focus trapping and Esc-to-close for free — no re-implemented modal logic.
- **Standard Popover API** — `showPopover()` opens in the top layer with native light-dismiss (`closedby="any"`), ideal for menus, tooltips and non-modal panels — no overlay `
`, no manual outside-click handling.
- **Single-backdrop stacking** — stacked native modals would each paint their own `::backdrop` and cumulatively darken the page; ngx-call keeps exactly one visible backdrop across the whole stack.
- **No `` to place** — react-call requires you to render `` in your component tree; ngx-call mounts instances imperatively (to `document.body`) once `provideCallable()` is registered, so there's nothing to wire into a template.
- **Signals throughout** — `call.props()`, `call.index()`, `call.stackSize()` and `DialogService.openCount` are Angular signals.
The UI primitives are optional: use the headless `createCallable` with your own markup, or lean on `Dialog` / `DialogContent` for the batteries-included path.
**Familiar by design** — the public API deliberately mirrors react-call's surface (`createCallable`, and `call` / `upsert` / `update` / `end` / `setRoot`). Porting a dialog between React and Angular — in either direction — is closer to a mechanical rename than a rewrite.
## Install
```bash
npm i ngx-call
```
Then capture the root injector at bootstrap:
```typescript
bootstrapApplication(App, { providers: [provideCallable()] });
```
## Development
This is a multi-project Angular workspace: the `ngx-call` library and a `demo` application.
```bash
npm install
npm start # serves the demo at http://localhost:4200/
npx ng build ngx-call # builds the library
npx ng build demo # builds the demo app
npm test # runs unit tests (Vitest)
```
## Demo deployment
The demo is built and published to GitHub Pages on every push to `main` via
[`.github/workflows/deploy.yml`](.github/workflows/deploy.yml) →
[hebus.github.io/ngx-call](https://hebus.github.io/ngx-call/).
## Credits
A direct port of [desko27/react-call](https://github.com/desko27/react-call) to Angular.