chore(docs): Docs Site For Angular

docs.json

@@ -15,6 +15,11 @@
       "id": "react",
       "title": "React",
       "href": "/react"
+    },
+    {
+      "id": "angular",
+      "title": "Angular",
+      "href": "/angular"
     }
   ],
   "sidebar": [
@@ -42,6 +47,37 @@
         }
       ]
     },
+    {
+      "tab": "angular",
+      "group": "Data Connect",
+      "pages": [
+        {
+          "title": "Getting Started",
+          "href": "/angular/data-connect"
+        },
+        {
+          "title": "Querying",
+          "href": "/angular/data-connect/querying"
+        },
+        {
+          "title": "Mutations",
+          "href": "/angular/data-connect/mutations"
+        },
+        {
+          "group": "Functions",
+          "pages": [
+            {
+              "title": "injectDataConnectQuery",
+              "href": "/angular/data-connect/functions/injectDataConnectQuery"
+            },
+            {
+              "title": "injectDataConnectMutation",
+              "href": "/angular/data-connect/functions/injectDataConnectMutation"
+            }
+          ]
+        }
+      ]
+    },
     {
       "tab": "react",
       "group": "Authentication",

docs/angular/data-connect/functions/injectDataConnectMutation.mdx

@@ -0,0 +1,42 @@
+---
+title: injectDataConnectMutation
+---
+
+`injectDataConnectMutation` is an injector designed to simplify handling mutations (creating, updating, deleting) with Firebase Data Connect.
+
+See [mutations](/angular/data-connect/mutations) for more information.
+
+## Features
+
+- Simplifies mutation handling for <b>create</b>, <b>update</b>, and <b>delete</b> operations using Firebase Data Connect.
+- Provides <b>type-safe</b> handling of mutations based on your Firebase Data Connect schema.
+- Automatically manages <b>pending</b>, <b>success</b>, and <b>error</b> states for mutations.
+- Supports <b>optimistic updates</b> and <b>caching</b> to improve user experience and performance.
+
+## Usage
+
+```ts
+import { injectDataConnectMutation } from "@tanstack-query-firebase/angular/data-connect";
+import { createMovieRef } from "@your-package-name/your-connector";
+
+class AddMovieComponent() {
+  createMovie = injectDataConnectMutation(
+    createMovieRef
+  );
+  addMovie() {
+    createMovie.mutate({
+      title: 'John Wick',
+      genre: "Action",
+      imageUrl: "https://example.com/image.jpg",
+    });
+  }
+  return (
+    <button
+      disabled={createMovie.isPending()}
+      (click)="addMovie()"
+    >
+      {{createMovie.isPending() ? "Creating..." : "Create Movie"}}
+    </button>
+  );
+}
+```

docs/angular/data-connect/functions/injectDataConnectQuery.mdx

@@ -0,0 +1,43 @@
+---
+title: injectDataConnectQuery
+---
+
+`injectDataConnectQuery` is an injector designed to simplify data fetching and state management with Firebase Data Connect.
+
+See [querying](/angular/data-connect/querying) for more information.
+
+## Features
+
+- Provides <b>type-safe</b> handling of queries based on the Firebase Data Connect schema.
+- Simplifies data fetching using Firebase Data Connect.
+- Automatically manages <b>loading</b>, <b>success</b>, and <b>error</b> states.
+- Supports <b>refetching data</b> with integrated <b>caching</b>.
+
+## Usage
+
+```ts
+import { injectDataConnectQuery } from '@tanstack-query-firebase/angular/data-connect';
+import { listMoviesRef } from "@your-package-name/your-connector";
+
+// class
+export class MovieListComponent {
+  movies = injectDataConnectQuery(listMoviesRef());
+}
+
+// template
+@if (movies.isPending()) {
+    Loading...
+}
+@if (movies.error()) {
+    An error has occurred: {{ movies.error() }}
+}
+@if (movies.data(); as data) {
+    @for (movie of data.movies; track movie.id) {
+    <mat-card appearance="outlined">
+        <mat-card-content>{{movie.description}}</mat-card-content>
+    </mat-card>
+    } @empty {
+        <h2>No items!</h2>
+    }
+}
+```

docs/angular/data-connect/index.mdx

@@ -0,0 +1,117 @@
+---
+title: Firebase Data Connect
+---
+
+Firebase Data Connect is a relational database service for mobile and web apps that lets you build and scale using a fully-managed PostgreSQL database powered by Cloud SQL. It provides secure schema, query and mutation management using GraphQL technology that integrates well with Firebase Authentication.
+
+To get started, ensure you have setup your Firebase project and have the Data Connect setup in your project. To learn more, 
+follow the [Firebase Data Connect documentation](https://firebase.google.com/docs/data-connect/quickstart).
+
+## Setup
+
+Before using the Tanstack Query Firebase injectors for Data Connect, ensure you have configured your application using your chosen connector:
+
+```ts
+// app.config.ts
+export const appConfig: ApplicationConfig = {
+  providers: [
+    ...
+    provideFirebaseApp(() =>
+      initializeApp(/*Replace with your firebase config*/)
+    ),
+    provideDataConnect(() => getDataConnect(connectorConfig)),
+    provideTanStackQuery(new QueryClient()),
+  ],
+};
+```
+
+## Importing
+
+The package exports are available via the `@tanstack-query-firebase/angular` package under the `data-connect` namespace:
+
+```ts
+import { injectDataConnectQuery } from "@tanstack-query-firebase/angular/data-connect";
+```
+
+## Basic Usage
+
+To use the Tanstack Query Firebase injectors, you can either use the generated SDKs, or the `injectDataConnectQuery` injector to fetch data from the database:
+
+### Using the Generated SDK
+
+The generated SDK reduces the boilerplate required to use Tanstack Query Firebase's injectors. Instead of having to provide a ref to `injectDataConnectQuery`, you simply need to call the generated
+injector function like so:
+
+```ts
+import { injectListMyPosts } from '@firebasegen/posts/angular'
+
+@Component({
+  ...
+  template: `
+    @if (posts.isPending()) {
+        Loading...
+    }
+    @if (posts.error()) {
+        An error has occurred: {{ posts.error() }}
+    }
+    @if (posts.data(); as data) {
+        @for (post of data.posts; track post.id) {
+        <mat-card appearance="outlined">
+            <mat-card-content>{{post.description}}</mat-card-content>
+        </mat-card>
+        } @empty {
+            <h2>No items!</h2>
+        }
+    }
+  `,
+})
+export class PostListComponent {
+  // Calls `injectDataConnectQuery` with the corresponding types.
+  posts = injectListMyPosts();
+}
+```
+
+### Using `injectDataConnectQuery`
+
+Alternatively, you can use the `injectDataConnectQuery` injector. To use this, you need to pass the Response and Data generics:
+
+```ts
+import { injectDataConnectQuery } from "@tanstack-query-firebase/angular";
+import { listMoviesRef } from "@firebasegen/posts";
+
+@Component({
+  ...
+  template: `
+    @if (posts.isPending()) {
+        Loading...
+    }
+    @if (posts.error()) {
+        An error has occurred: {{ posts.error() }}
+    }
+    @if (posts.data(); as data) {
+        @for (post of data.posts; track post.id) {
+        <mat-card appearance="outlined">
+            <mat-card-content>{{post.description}}</mat-card-content>
+        </mat-card>
+        } @empty {
+            <h2>No items!</h2>
+        }
+    }
+  `,
+})
+export class PostListComponent {
+  // Calls `injectDataConnectQuery` with the corresponding types.
+  // Alternatively:
+  // injectDataConnectQuery(queryRef<ListMoviesData, ListMoviesResponse>(dc, 'ListMovies'))
+  posts = injectDataConnectQuery(listMoviesRef());
+}
+```
+
+The injectors will automatically infer the data type from the connector and the query and automtically create a [query key](https://tanstack.com/query/latest/docs/framework/angular/guides/query-keys) for the query.
+
+## Learning more
+
+To learn more about the Data Connect functions, check out the following pages:
+
+- [Querying](/angular/data-connect/querying)
+- [Mutations](/angular/data-connect/mutations)

docs/angular/data-connect/mutations.mdx

@@ -0,0 +1,84 @@
+---
+title: Mutations
+description: Learn how to mutate data in Firebase Data Connect using the Tanstack Query Firebase injectors.
+---
+
+## Mutating Data
+
+To mutate data in Firebase Data Connect, you can either use the generated injectors, or use the `injectDataConnectMutation` injector.
+
+```ts
+import { injectCreateMovie } from "@firebasegen/movies/angular";
+
+@Component({
+  ...
+  template: `
+  <button
+    disabled={createMovie.isPending()}
+    (click)="addMovie()"
+  >
+    {{createMovie.isPending() ? "Creating..." : "Create Movie"}}
+  </button>
+  `
+})
+class AddMovieComponent() {
+  // Calls `injectDataConnectMutation` with the respective types.
+  // Alternatively:
+  // import { injectDataConnectMutation } from '@tanstack-query-firebase/angular/data-connect';
+  // ...
+  // createMovie = injectDataConnectMutation(createMovieRef);
+  createMovie = injectCreateMovie();
+  addMovie() {
+    createMovie.mutate({
+      title: 'John Wick',
+      genre: "Action",
+      imageUrl: "https://example.com/image.jpg",
+    });
+  }
+}
+```
+
+Additionally, you can provide a factory function to the mutation, which will be called with the mutation variables:
+
+```ts
+createMovie = injectDataConnectMutation(undefined, () => ({
+    mutationFn: (title: string) => createMovieRef({ title, reviewDate: Date.now() })
+}));
+
+// ...
+createMovie.mutate("John Wick");
+```
+
+## Invalidating Queries
+
+The function provides an additional [mutation option](https://tanstack.com/query/latest/docs/framework/angular/reference/functions/injectMutation) called `invalidate`. This option accepts a list of query references which will be automatically invalidated when the mutation is successful.
+
+You can also provide explicit references to the invalidate array, for example:
+
+```ts
+const createMovie = injectDataConnectMutation(createMovieRef, {
+  invalidate: [getMovieRef({ id: "1" })],
+});
+```
+
+In this case only the query reference `getMovieRef({ id: "1" })` will be invalidated.
+
+## Overriding the mutation key
+
+### Metadata
+
+Along with the data, the function will also return the `ref`, `source`, and `fetchTime` metadata from the mutation.
+
+```ts
+const createMovie = injectDataConnectMutation(createMovieRef);
+
+await createMovie.mutateAsync({
+  title: 'John Wick',
+  genre: "Action",
+  imageUrl: "https://example.com/image.jpg",
+});
+
+console.log(createMovie.dataConnectResult().ref);
+console.log(createMovie.dataConnectResult().source);
+console.log(createMovie.dataConnectResult().fetchTime);
+```