vcgit-forge/angular-challenges
1
0
Fork 0
mirror of https://github.com/Raghu-Ch/angular-challenges.git synced 2026-02-10 12:53:03 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat: add answer for challenge 45

Browse Source 
add one possible answer for the new challenge 45.
This commit is contained in:
Wandrille
2024-02-09 09:25:05 +01:00
parent 0f4f14c351
commit 7458977d35
6 changed files with 139 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/angular/react-in-angular/src/app/react/ReactPost.tsx
View File

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

48
apps/angular/react-in-angular/src/app/react/post.component.tsx Normal file
View File

@@ -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>
);
}
}
}

2
apps/angular/react-in-angular/tailwind.config.js
View File

@@ -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: {

1
apps/angular/react-in-angular/tsconfig.json
View File

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

84
package-lock.json generated
View File

@@ -32,6 +32,8 @@
"@rx-angular/template": "^17.0.0",
"@swc/helpers": "0.5.3",
"@tanstack/angular-query-experimental": "^5.12.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"rxjs": "7.8.1",
"tailwindcss": "^3.3.5",
"tslib": "^2.3.0",
@@ -71,6 +73,8 @@
"@testing-library/user-event": "^14.5.1",
"@types/jest": "29.4.0",
"@types/node": "18.16.9",
"@types/react": "^18.2.55",
"@types/react-dom": "^18.2.19",
"@typescript-eslint/eslint-plugin": "6.11.0",
"@typescript-eslint/parser": "6.11.0",
"all-contributors-cli": "^6.26.1",
@@ -8837,6 +8841,12 @@
"resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
"integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw=="
},
"node_modules/@types/prop-types": {
"version": "15.7.11",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz",
"integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==",
"dev": true
},
"node_modules/@types/qs": {
"version": "6.9.11",
"resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.11.tgz",
@@ -8847,6 +8857,26 @@
"resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.7.tgz",
"integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ=="
},
"node_modules/@types/react": {
"version": "18.2.55",
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.55.tgz",
"integrity": "sha512-Y2Tz5P4yz23brwm2d7jNon39qoAtMMmalOQv6+fEFt1mT+FcM3D841wDpoUvFXhaYenuROCy3FZYqdTjM7qVyA==",
"dev": true,
"dependencies": {
"@types/prop-types": "*",
"@types/scheduler": "*",
"csstype": "^3.0.2"
}
},
"node_modules/@types/react-dom": {
"version": "18.2.19",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.19.tgz",
"integrity": "sha512-aZvQL6uUbIJpjZk4U8JZGbau9KDeAwMfmhyWorxgBkqDIEf6ROjRozcmPIicqsUwPUjbkDfHKgGee1Lq65APcA==",
"dev": true,
"dependencies": {
"@types/react": "*"
}
},
"node_modules/@types/resolve": {
"version": "1.20.2",
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
@@ -8867,6 +8897,12 @@
"resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
"integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA=="
},
"node_modules/@types/scheduler": {
"version": "0.16.8",
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
"integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==",
"dev": true
},
"node_modules/@types/semver": {
"version": "7.5.6",
"resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.6.tgz",
@@ -12674,6 +12710,12 @@
"integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==",
"devOptional": true
},
"node_modules/csstype": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
"dev": true
},
"node_modules/cuint": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/cuint/-/cuint-0.2.2.tgz",
@@ -20348,6 +20390,17 @@
"url": "https://github.com/chalk/slice-ansi?sponsor=1"
}
},
"node_modules/loose-envify": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
"dependencies": {
"js-tokens": "^3.0.0 || ^4.0.0"
},
"bin": {
"loose-envify": "cli.js"
}
},
"node_modules/lower-case": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
@@ -24012,6 +24065,29 @@
"node": ">= 0.8"
}
},
"node_modules/react": {
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
"integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
"dependencies": {
"loose-envify": "^1.1.0"
},
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/react-dom": {
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
"integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
"dependencies": {
"loose-envify": "^1.1.0",
"scheduler": "^0.23.0"
},
"peerDependencies": {
"react": "^18.2.0"
}
},
"node_modules/react-is": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -24972,6 +25048,14 @@
"node": ">=v12.22.7"
}
},
"node_modules/scheduler": {
"version": "0.23.0",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
"integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
"dependencies": {
"loose-envify": "^1.1.0"
}
},
"node_modules/schema-utils": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.2.0.tgz",

4
package.json
View File

@@ -35,6 +35,8 @@
"@rx-angular/template": "^17.0.0",
"@swc/helpers": "0.5.3",
"@tanstack/angular-query-experimental": "^5.12.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"rxjs": "7.8.1",
"tailwindcss": "^3.3.5",
"tslib": "^2.3.0",
@@ -74,6 +76,8 @@
"@testing-library/user-event": "^14.5.1",
"@types/jest": "29.4.0",
"@types/node": "18.16.9",
"@types/react": "^18.2.55",
"@types/react-dom": "^18.2.19",
"@typescript-eslint/eslint-plugin": "6.11.0",
"@typescript-eslint/parser": "6.11.0",
"all-contributors-cli": "^6.26.1",