add angular example for rekognition

Author: chrisbonifacio

src/pages/[platform]/build-a-backend/data/custom-business-logic/connect-amazon-rekognition/index.mdx

@@ -219,6 +219,7 @@ Amplify.configure(outputs);
 
 This code sets up a React app to upload an image to an S3 bucket and then use Amazon Rekognition to recognize the text in the uploaded image.
 
+<InlineFilter filters={["react", "javascript", "nextjs", "react-native"]}>
 ```ts title="App.tsx"
 import { type ChangeEvent, useState } from "react";
 import { generateClient } from "aws-amplify/api";
@@ -282,3 +283,71 @@ function App() {
 
 export default App;
 ```
+</InlineFilter>
+<InlineFilter filters={["angular"]}>
+```ts title="app.component.ts"
+import { Component } from '@angular/core';
+import { generateClient } from 'aws-amplify/api';
+import { uploadData } from 'aws-amplify/storage';
+import { Schema } from '../../../amplify/data/resource';
+import { CommonModule } from '@angular/common';
+
+// Generating the client
+const client = generateClient<Schema>();
+
+type IdentifyTextReturnType = Schema['identifyText']['returnType'];
+
+@Component({
+  selector: 'app-text-recognition',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div>
+      <h1>Amazon Rekognition Text Recognition</h1>
+      <div>
+        <input type="file" (change)="handleTranslate($event)" />
+        <button (click)="recognizeText()">Recognize Text</button>
+        <div>
+          <h3>Recognized Text:</h3>
+          {{ textData }}
+        </div>
+      </div>
+    </div>
+  `,
+})
+export class TodosComponent {
+  // Component properties instead of React state
+  path: string = '';
+  textData?: IdentifyTextReturnType;
+
+  // Function to handle file upload to S3 bucket
+  async handleTranslate(event: Event) {
+    const target = event.target as HTMLInputElement;
+    if (target.files && target.files.length > 0) {
+      const file = target.files[0];
+      const s3Path = 'public/' + file.name;
+
+      try {
+        await uploadData({
+          path: s3Path,
+          data: file,
+        });
+
+        this.path = s3Path;
+      } catch (error) {
+        console.error(error);
+      }
+    }
+  }
+
+  // Function to recognize text from the uploaded image
+  async recognizeText() {
+    // Identifying text in the uploaded image
+    const { data } = await client.queries.identifyText({
+      path: this.path, // File name
+    });
+    this.textData = data;
+  }
+}
+```
+</InlineFilter>