diff --git a/src/fragments/lib/auth/js/enable_sign_in_sign_up.mdx b/src/fragments/lib/auth/js/enable_sign_in_sign_up.mdx index bc648f39b30..4bf8a00a71c 100644 --- a/src/fragments/lib/auth/js/enable_sign_in_sign_up.mdx +++ b/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. diff --git a/src/pages/[platform]/build-a-backend/auth/connect-your-frontend/listen-to-auth-events/index.mdx b/src/pages/[platform]/build-a-backend/auth/connect-your-frontend/listen-to-auth-events/index.mdx index 559d2afc1a4..f44dddd490e 100644 --- a/src/pages/[platform]/build-a-backend/auth/connect-your-frontend/listen-to-auth-events/index.mdx +++ b/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; } }); 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 index 26542619284..94586ae530c 100644 --- 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 @@ -129,7 +129,7 @@ npm add aws-amplify ``` - + 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); + + + +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); +``` + + + 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 - + ```tsx title="src/TodoList.tsx" import type { Schema } from '../amplify/data/resource' @@ -408,6 +422,49 @@ export default function TodoList() { + + +```html title="src/app/todos/todos.component.html" + +
+

My todos

+ +
+ +``` + +```ts title="src/app/todos/todos.component.ts" + +... +import { generateClient } from 'aws-amplify/data'; +import type { Schema } from '../../../amplify/data/resource'; + +const client = generateClient(); + +@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); + } + } + +} + +``` + + @@ -637,7 +694,7 @@ Creating Todo successful. Next, list all your todos and then refetch the todos after a todo has been added: - + ```tsx title="src/TodoList.tsx" @@ -683,6 +740,57 @@ export default function TodoList() { + + +```html title="src/app/todos/todos.component.html" +
+

My todos

+ +
    +
  • + {{ todo.content }} +
    • +
+
+ +``` + +```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); + } + } + +} + +``` + + + ```html title="src/TodoList.vue" @@ -940,7 +1048,7 @@ class _MyHomePageState extends State { ## Subscribe to real-time updates - + 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() { + + +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(); + +@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); + } + } +} + +``` + + + + ```html title="src/TodoList.vue"