add code examples for angular

Author: chrisbonifacio

src/pages/[platform]/build-a-backend/data/set-up-data/index.mdx

@@ -360,7 +360,7 @@ Future<void> main() async {
 </InlineFilter>
 ## Write data to your backend
 
-<InlineFilter filters={["react", "angular", "javascript", "vue", "nextjs", "react-native"]}>
+<InlineFilter filters={["react", "javascript", "nextjs", "react-native", "vue"]}>
 
 Let's first add a button to create a new todo item. To make a "create Todo" API request, generate the data client using `generateClient()` in your frontend code, and then call `.create()` operation for the Todo model. The Data client is a fully typed client that gives you in-IDE code completion. To enable this in-IDE code completion capability, pass in the `Schema` type to the `generateClient` function.
 
@@ -391,8 +391,44 @@ Run the application in local development mode and check your network tab after c
 Try playing around with the code completion of `.update(...)` and `.delete(...)` to get a sense of other mutation operations.
 
 </Callout>
+</InlineFilter>
+
+<InlineFilter filters={["angular"]}>
+
+Let's first add a button to create a new todo item. To make a "create Todo" API request, generate the data client using `generateClient()` in your frontend code, and then call `.create()` operation for the Todo model. The Data client is a fully typed client that gives you in-IDE code completion. To enable this in-IDE code completion capability, pass in the `Schema` type to the `generateClient` function.
+
+```tsx title="todo-list.component.ts"
+import { Component } from '@angular/core';
+import type { Schema } from '../amplify/data/resource';
+import { generateClient } from 'aws-amplify/data';
+
+const client = generateClient<Schema>();
+
+@Component({
+  selector: 'app-todo-list',
+  template: `
+    <button (click)="createTodo()">Add new todo</button>
+  `
+})
+export class TodoListComponent {
+  async createTodo() {
+    await client.models.Todo.create({
+      content: window.prompt("Todo content?"),
+      isDone: false
+    });
+  }
+}
+```
+
+Run the application in local development mode and check your network tab after creating a todo. You should see a successful request to a `/graphql` endpoint.
+
+<Callout>
+
+Try playing around with the code completion of `.update(...)` and `.delete(...)` to get a sense of other mutation operations.
 
+</Callout>
 </InlineFilter>
+
 <InlineFilter filters={["android"]}>
 
 In your MainActivity, add a button to create a new todo.
@@ -583,9 +619,7 @@ Creating Todo successful.
 
 Next, list all your todos and then refetch the todos after a todo has been added:
 
-<InlineFilter filters={["react", "angular", "javascript", "vue", "nextjs", "react-native"]}>
-
-
+<InlineFilter filters={["react", "javascript", "vue", "nextjs", "react-native"]}>
 ```tsx title="src/TodoList.tsx"
 import { useState, useEffect } from "react";
 import type { Schema } from "../amplify/data/resource";
@@ -628,6 +662,49 @@ export default function TodoList() {
 ```
 
 </InlineFilter>
+
+<InlineFilter filters={["angular"]}>
+```tsx title="todo-list.component.ts"
+import { Component, OnInit } from '@angular/core';
+import type { Schema } from '../amplify/data/resource';
+import { generateClient } from 'aws-amplify/data';
+
+const client = generateClient<Schema>();
+
+@Component({
+  selector: 'app-todo-list',
+  template: `
+    <div>
+      <button (click)="createTodo()">Add new todo</button>
+      <ul>
+        <li *ngFor="let todo of todos">{{ todo.content }}</li>
+      </ul>
+    </div>
+  `
+})
+export class TodoListComponent implements OnInit {
+  todos: Schema['Todo']['type'][] = [];
+
+  async ngOnInit() {
+    await this.fetchTodos();
+  }
+
+  async fetchTodos() {
+    const { data: items } = await client.models.Todo.list();
+    this.todos = items;
+  }
+
+  async createTodo() {
+    await client.models.Todo.create({
+      content: window.prompt('Todo content?'),
+      isDone: false
+    });
+    await this.fetchTodos();
+  }
+}
+```
+</InlineFilter>
+
 <InlineFilter filters={["android"]}>
 
 Start by creating a new `TodoList` @Composable that fetches the data on the initial display of the TodoList:
@@ -838,7 +915,7 @@ class _MyHomePageState extends State<MyHomePage> {
 
 ## Subscribe to real-time updates
 
-<InlineFilter filters={["react", "angular", "javascript", "vue", "nextjs", "react-native"]}>
+<InlineFilter filters={["react", "javascript", "vue", "nextjs", "react-native"]}>
 
 You can also use `observeQuery` to subscribe to a live feed of your backend data. Let's refactor the code to use a real-time observeQuery instead.
 
@@ -893,6 +970,90 @@ You can also use `.onCreate`, `.onUpdate`, or `.onDelete` to subscribe to specif
 </Callout>
 
 </InlineFilter>
+
+<InlineFilter filters={["angular"]}>
+
+You can also use `observeQuery` to subscribe to a live feed of your backend data. Let's refactor the code to use a real-time observeQuery instead.
+
+```tsx title="todo-list.component.ts"
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { generateClient } from 'aws-amplify/data';
+import type { Schema } from '../../../amplify/data/resource';
+import { Subscription } from 'rxjs';
+
+const client = generateClient<Schema>();
+
+@Component({
+  selector: 'app-todos',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <main>
+      <h1>My todos</h1>
+      <button (click)="createTodo()">+ new</button>
+      <ul>
+        <li *ngFor="let todo of todos">
+          {{ todo.content }}
+        </li>
+      </ul>
+      <div>
+        🥳 App successfully hosted. Try creating a new todo.
+        <br />
+        <a href="https://docs.amplify.aws/gen2/start/quickstart/">
+          Review next steps of this tutorial.
+        </a>
+      </div>
+    </main>
+  `,
+})
+export class TodosComponent implements OnInit {
+  todos: Schema['Todo']['type'][] = [];
+  subscription?: Subscription;
+
+  ngOnInit(): void {
+    this.listTodos();
+  }
+
+  ngOnDestroy(): void {
+    this.subscription?.unsubscribe();
+  }
+
+  listTodos() {
+    try {
+      this.subscription = client.models.Todo.observeQuery().subscribe({
+        next: ({ items, isSynced }) => {
+          this.todos = items;
+        },
+      });
+    } catch (error) {
+      console.error('error fetching todos', error);
+    }
+  }
+
+  createTodo() {
+    try {
+      client.models.Todo.create({
+        content: window.prompt('Todo content'),
+      });
+      this.listTodos();
+    } catch (error) {
+      console.error('error creating todos', error);
+    }
+  }
+}
+```
+
+Now try to open your app in two browser windows and see how creating a todo in one window automatically adds the todo in the second window as well.
+
+<Callout>
+
+You can also use `.onCreate`, `.onUpdate`, or `.onDelete` to subscribe to specific events. Review [Subscribe to real-time events](/[platform]/build-a-backend/data/subscribe-data) to learn more about subscribing to specific mutation events.
+
+</Callout>
+
+</InlineFilter>
+
 <InlineFilter filters={["android"]}>
 
 To add real-time updates, you can use the subscription feature of Amplify Data. It allows to subscribe to `onCreate`, `onUpdate`, and `onDelete` events of the application. In our example, let's append the list every time a new todo is added.