feat: add answer for challenge 45

add one possible answer for the new challenge 45.

apps/angular/react-in-angular/src/app/react/ReactPost.tsx

@@ -1,4 +1,4 @@
-// import React from 'react';
+import React from 'react';
 
 export default function ReactPost(props: {
   title?: string,

apps/angular/react-in-angular/src/app/react/post.component.tsx

@@ -0,0 +1,48 @@
+import { AfterViewInit, Component, ElementRef, EventEmitter, input, OnChanges, Output, ViewChild } from '@angular/core';
+import { createRoot, Root } from 'react-dom/client';
+import React from 'react';
+import ReactPost from './ReactPost';
+
+type Post = { title: string; description: string, pictureLink: string };
+
+
+@Component({
+  standalone: true,
+  selector: 'app-post',
+  template: `
+    <div #react></div>`,
+  styles: ['']
+})
+export class PostComponent implements AfterViewInit, OnChanges {
+  @ViewChild('react', { static: true }) containerRef!: ElementRef;
+
+  post = input<Post | undefined>(undefined);
+  isSelected = input<boolean>(false);
+  @Output() selectPost = new EventEmitter<void>();
+  root?: Root;
+
+  ngOnChanges(): void {
+    this.render();
+  }
+
+  ngAfterViewInit() {
+    this.root = createRoot(this.containerRef.nativeElement);
+    this.render();
+  }
+
+  private render() {
+    if (this.root) {
+      this.root.render(
+        <React.StrictMode>
+          <ReactPost
+            title={this.post()?.title}
+            description={this.post()?.description}
+            pictureLink={this.post()?.pictureLink}
+            handleClick={() => this.selectPost.emit()}
+            selected={this.isSelected()}
+          />
+        </React.StrictMode>
+      );
+    }
+  }
+}

apps/angular/react-in-angular/tailwind.config.js

@@ -4,7 +4,7 @@ const { join } = require('path');
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
+    join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html,tsx}'),
     ...createGlobPatternsForDependencies(__dirname),
   ],
   theme: {

apps/angular/react-in-angular/tsconfig.json

@@ -9,6 +9,7 @@
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
+    "jsx": "react",
   },
   "files": [],
   "include": [],