convex-angular

The Angular client for Convex.

Getting Started

1. Install the dependencies:

pnpm add convex convex-angular

yarn add convex convex-angular

npm install convex convex-angular

2. Add provideConvex to your app.config.ts file:

import { provideConvex } from 'convex-angular';

export const appConfig: ApplicationConfig = {
  providers: [provideConvex('https://<your-convex-deployment>.convex.cloud')],
};

3. That's it! You can now use the injection providers in your app.

Usage

Note: All injection providers in convex-angular (injectQuery, injectMutation, injectAction) - are built on top of Angular Signals. As a result, they return reactive signals, providing fine-grained reactivity and smooth integration with Angular's change detection.

Fetching data

Use injectQuery to fetch data from the database.

import { injectQuery } from 'convex-angular';

@Component({
  selector: 'app-root',
  template: `
    <ul>
      @for (todo of todos.data(); track todo._id) {
        <li>{{ todo.name }}</li>
      }
    </ul>
  `,
})
export class AppComponent {
  readonly todos = injectQuery(api.todo.listTodos);
}

Mutating data

Use injectMutation to mutate the database.

import { injectMutation } from 'convex-angular';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="addTodo.mutate({ id: '1', name: 'Buy groceries' })">
      Add Todo
    </button>
  `,
})
export class AppComponent {
  readonly addTodo = injectMutation(api.todo.addTodo);
}

Running actions

Use injectAction to run actions.

import { injectAction } from 'convex-angular';

@Component({
  selector: 'app-root',
  template: `<button (click)="resetTodos.run({})">Reset Todos</button>`,
})
export class AppComponent {
  readonly resetTodos = injectAction(api.todoFunctions.resetTodos);
}

Contributing

Contributions are welcome! Please feel free to submit a pull request.

License

MIT