https://github.com/makuko/zag-angular
An Angular wrapper for zag
https://github.com/makuko/zag-angular
Last synced: 6 days ago
JSON representation
An Angular wrapper for zag
- Host: GitHub
- URL: https://github.com/makuko/zag-angular
- Owner: makuko
- Created: 2025-02-27T14:08:27.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-09-29T16:01:38.000Z (4 months ago)
- Last Synced: 2025-11-22T21:03:24.123Z (about 2 months ago)
- Language: TypeScript
- Size: 859 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- fucking-awesome-angular - zag-angular - Angular wrapper for <b><code> 4923⭐</code></b> <b><code> 238🍴</code></b> [zag](https://github.com/chakra-ui/zag)). (Framework Interoperability / Wrappers)
- awesome-angular - zag-angular - Angular wrapper for [zag](https://github.com/chakra-ui/zag). (Framework Interoperability / Wrappers)
README
# Getting Started
This package allows you to use Zag with Angular.
To get Zag running, you'll need to:
1. Install the machine for the component you're interested in. Let's say you
want to use the `tooltip` machine.
```bash
npm install @zag-js/tooltip
# or
yarn add @zag-js/tooltip
```
2. Install the adapter for Angular.
```bash
npm install zag-angular
# or
yarn add zag-angular
```
> Congrats! You're ready to use tooltip machine in your project.
## Using the machine
Here's an example of the tooltip machine used in an Angular project.
```ts
import { Component, computed, type Signal } from "@angular/core";
import * as tooltip from "@zag-js/tooltip";
import { createId, normalizeProps, useMachine, ZagIt } from "zag-angular";
@Component({
selector: "app-tooltip",
standalone: true,
imports: [ZagIt],
template: `
Hover me
@if (api().open) {
Tooltip
}
`
})
export class TooltipComponent {
api: Signal;
constructor() {
const service = useMachine(tooltip.machine, { id: createId() });
this.api = computed(() => tooltip.connect(service, normalizeProps));
}
}
```
Notice that we imported the `ZagIt` directive. This is necessary because Angular
doesn't have "spread props". This directive emulates this behavior and updates all
attributes and event listeners when its input changes.
There's also a `createId` helper function provided that creates unique IDs in case
you need it.
## Using ZagIt as host directive
Sometimes we want to use `ZagIt` as a host directive to use the host element as
a part of the state machine. Since Angular doesn't provide a way to set inputs on
host directives `ZagIt` needs to be injected and the input needs to be provided
in the constructor instead of the template. Here's an example using the collapsible
machine:
```ts
import { Component, computed, inject, type Signal } from "@angular/core";
import * as collapsible from "@zag-js/collapsible";
import { createId, normalizeProps, useMachine, ZagIt } from "zag-angular";
@Component({
selector: "app-collapsible",
standalone: true,
imports: [ZagIt],
template: `
Collapse Trigger
Collape Content
`,
hostDirectives: [ZagIt]
})
export class CollapsibleComponent {
api: Signal;
zagIt = inject(ZagIt);
constructor() {
const service = useMachine(collapsible.machine, { id: createId() });
this.api = computed(() => collapsible.connect(service, normalizeProps));
this.zagIt.next = computed(() => this.api().getRootProps());
}
}
```