diff --git a/src/pages/[platform]/build-a-backend/data/custom-business-logic/connect-amazon-polly/index.mdx b/src/pages/[platform]/build-a-backend/data/custom-business-logic/connect-amazon-polly/index.mdx
index ccd7697d650..3956be5bacc 100644
--- a/src/pages/[platform]/build-a-backend/data/custom-business-logic/connect-amazon-polly/index.mdx
+++ b/src/pages/[platform]/build-a-backend/data/custom-business-logic/connect-amazon-polly/index.mdx
@@ -218,6 +218,7 @@ Amplify.configure(outputs);
Example frontend code to create an audio buffer for playback using a text input.
+
```ts title="App.tsx"
import "./App.css";
import { generateClient } from "aws-amplify/api";
@@ -267,4 +268,53 @@ function App() {
export default App;
```
+
+
+```ts title="app.component.ts"
+import { Component } from '@angular/core';
+import { generateClient } from 'aws-amplify/api';
+import type { Schema } from '../../../amplify/data/resource';
+import { getUrl } from 'aws-amplify/storage';
+
+const client = generateClient();
+
+type PollyReturnType = Schema['convertTextToSpeech']['returnType'];
+
+@Component({
+ selector: 'app-root',
+ template: `
+
+ `,
+ styleUrls: ['./app.component.css'],
+})
+export class App {
+ src: string = '';
+ file: PollyReturnType = '';
+
+ async synthesize() {
+ const { data, errors } = await client.mutations.convertTextToSpeech({
+ text: 'Hello World!',
+ });
+
+ if (!errors && data) {
+ this.file = data;
+ } else {
+ console.log(errors);
+ }
+ }
+
+ async fetchAudio() {
+ const res = await getUrl({
+ path: 'public/' + this.file,
+ });
+
+ this.src = res.url.toString();
+ }
+}
+```
+