Angular Getting Started updates

src/fragments/lib/auth/js/enable_sign_in_sign_up.mdx

@@ -137,11 +137,16 @@ Amplify.configure(amplifyconfig);
 export class AppModule {}
 ```
 
-Next, import the default theme inside __styles.css__:
-
-```css
-@import '~@aws-amplify/ui-angular/theme.css';
-````
+Next, import the default theme inside __angular.json__:
+
+```json title="angular.json"
+...
+    "styles": [
+      "node_modules/@aws-amplify/ui-angular/theme.css",
+      "src/styles.css"
+    ],
+...
+```
 
 Next, open __app.component.html__ and add the `amplify-authenticator` component.
 

src/pages/[platform]/build-a-backend/auth/connect-your-frontend/listen-to-auth-events/index.mdx

@@ -87,7 +87,7 @@ Hub.listen('auth', ({ payload }) => {
       console.log('failure while trying to resolve signInWithRedirect API.');
       break;
     case 'customOAuthState':
-      logger.info('custom state returned from CognitoHosted UI');
+      console.log('custom state returned from CognitoHosted UI');
       break;
   }
 });

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

@@ -129,7 +129,7 @@ npm add aws-amplify
 ```
 </InlineFilter>
 
-<InlineFilter filters={["react", "angular", "javascript", "nextjs", "react-native"]}>
+<InlineFilter filters={["react", "javascript", "nextjs", "react-native"]}>
 
 In your app's entry point, typically **main.tsx** for React apps created using Vite, make the following edits:
 
@@ -142,6 +142,20 @@ Amplify.configure(outputs);
 
 </InlineFilter>
 
+
+<InlineFilter filters={[ "angular"]}>
+
+In your app's entry point, typically **main.ts** or **app.component.ts** for Angular apps created using Vite, make the following edits:
+
+```tsx title="src/main.ts"
+import { Amplify } from 'aws-amplify';
+import outputs from '../amplify_outputs.json';
+
+Amplify.configure(outputs);
+```
+
+</InlineFilter>
+
 <InlineFilter filters={["vue"]}>
 
 In your app's entry point, typically **main.ts** for Vue apps created using Vite, make the following edits:
@@ -384,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'
@@ -408,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"]}>
 
@@ -637,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"
@@ -683,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"
@@ -940,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.
 
@@ -988,6 +1096,62 @@ export default function TodoList() {
 
 </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.
+
+
+```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">

src/pages/[platform]/start/quickstart/index.mdx

@@ -1085,7 +1085,7 @@ Call the `deleteTodo` function from the UI.
 Try out the deletion functionality now by starting the local dev server:
 
 ```bash title="Terminal" showLineNumbers={false}
-npm run start
+ng serve
 ```
 
 This should start a local dev server at http://localhost:4200.
@@ -1111,7 +1111,7 @@ import { TodosComponent } from './todos/todos.component';
 import { Amplify } from 'aws-amplify';
 import outputs from '../../amplify_outputs.json';
 // highlight-next-line
-import { AmplifyAuthenticatorModule, AuthenticatorService } from '@aws-amplify/ui-angular';
+import { AmplifyAuthenticatorModule } from '@aws-amplify/ui-angular';
 
 Amplify.configure(outputs);
 
@@ -1125,11 +1125,9 @@ Amplify.configure(outputs);
 })
 export class AppComponent {
   title = 'amplify-angular-template';
-  // highlight-start
-  constructor(public authenticator: AuthenticatorService) {
-    Amplify.configure(outputs);
-  }
-  // highlight-end
+
+  constructor() { }
+
 }
 ```
 Update the application UI and include styles.