set up amplify data with angular

aws-amplify · Nov 25, 2024 · 05a232a · 05a232a
1 parent 9854e8c
commit 05a232a
Showing 1 changed file with 150 additions and 3 deletions.
diff --git a/src/pages/[platform]/build-a-backend/data/set-up-data/index.mdx b/src/pages/[platform]/build-a-backend/data/set-up-data/index.mdx
@@ -398,7 +398,7 @@ Let's first add a button to create a new todo item. To make a "create Todo" API
 </InlineFilter>
 
 
-<InlineFilter filters={["react", "angular", "javascript", "nextjs", "react-native"]}>
+<InlineFilter filters={["react", "javascript", "nextjs", "react-native"]}>
 
 ```tsx title="src/TodoList.tsx"
 import type { Schema } from '../amplify/data/resource'
@@ -422,6 +422,49 @@ export default function TodoList() {
 
 </InlineFilter>
 
+<InlineFilter filters={["angular"]}>
+
+```html title="src/app/todos/todos.component.html"
+
+<main>
+    <h1>My todos</h1>
+    <button (click)="createTodo()">+ new</button>
+</main>
+
+```
+
+```ts title="src/app/todos/todos.component.ts"
+
+...
+import { generateClient } from 'aws-amplify/data';
+import type { Schema } from '../../../amplify/data/resource';
+
+const client = generateClient<Schema>();
+
+@Component({
+  selector: 'app-todos',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './todos.component.html',
+  styleUrl: './todos.component.css',
+})
+export class TodosComponent implements OnInit {
+
+  createTodo() {
+    try {
+      client.models.Todo.create({
+        content: window.prompt('Todo content'),
+      });
+    } catch (error) {
+      console.error('error creating todos', error);
+    }
+  }
+
+}
+
+```
+</InlineFilter>
+
 
 <InlineFilter filters={["vue"]}>
 
@@ -651,7 +694,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", "nextjs", "react-native"]}>
+<InlineFilter filters={["react", "javascript", "nextjs", "react-native"]}>
 
 
 ```tsx title="src/TodoList.tsx"
@@ -697,6 +740,57 @@ export default function TodoList() {
 
 </InlineFilter>
 
+<InlineFilter filters={["angular"]}>
+
+```html title="src/app/todos/todos.component.html"
+<main>
+    <h1>My todos</h1>
+    <button (click)="createTodo()">+ new</button>
+    <ul>
+        <li 
+            *ngFor="let todo of todos; "  (click)="deleteTodo(todo.id)">
+            {{ todo.content }}
+        </li>
+    </ul>
+</main>
+
+```
+
+```ts title="src/app/todos/todos.component.ts"
+...
+export class TodosComponent implements OnInit {
+  todos: any[] = [];
+
+  ngOnInit() {
+    this.fetchTodos();
+  }
+
+  async createTodo() {
+    try {
+      await client.models.Todo.create({
+        content: window.prompt('Todo content'),
+      });
+    } catch (error) {
+      console.error('error creating todos', error);
+    }
+    await this.fetchTodos();
+  }
+
+  async fetchTodos() {
+    try {
+     const todos =  (await client.models.Todo.list()).data;
+     this.todos = [...todos]
+    } catch (error) {
+      console.error('error fetching todos', error);
+    }
+  }
+
+}
+
+```
+</InlineFilter>
+
+
 <InlineFilter filters={["vue"]}>
 
 ```html title="src/TodoList.vue"
@@ -954,7 +1048,7 @@ class _MyHomePageState extends State<MyHomePage> {
 
 ## Subscribe to real-time updates
 
-<InlineFilter filters={["react", "angular", "javascript", "nextjs", "react-native"]}>
+<InlineFilter filters={["react", "javascript", "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.
 
@@ -1002,6 +1096,59 @@ export default function TodoList() {
 
 </InlineFilter>
 
+<InlineFilter filters={["angular"]}>
+
+```ts title="src/app/todos/todos.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';
+
+const client = generateClient<Schema>();
+
+@Component({
+  selector: 'app-todos',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './todos.component.html',
+  styleUrl: './todos.component.css',
+})
+export class TodosComponent implements OnInit {
+  todos: any[] = [];
+
+  ngOnInit(): void {
+    this.listTodos();
+  }
+
+
+  listTodos() {
+    try {
+      client.models.Todo.observeQuery().subscribe({
+        next: ({ items, isSynced }) => {
+          this.todos = [...items];
+        },
+      });
+    } catch (error) {
+      console.error('error fetching todos', error);
+    }
+  }
+
+  async createTodo() {
+    try {
+     await client.models.Todo.create({
+        content: window.prompt('Todo content'),
+      });
+    } catch (error) {
+      console.error('error creating todos', error);
+    }
+  }
+}
+
+```
+
+</InlineFilter>
+
+
 <InlineFilter filters={["vue"]}>
 ```html title="src/TodoList.vue"
 <script setup lang="ts">