diff --git a/README.md b/README.md index 71de0c8..c43c996 100644 --- a/README.md +++ b/README.md @@ -24,7 +24,7 @@ If you would like to propose a challenge, this project is open source, so feel f ## Challenges -Check [all 38 challenges](https://angular-challenges.vercel.app/) +Check [all 39 challenges](https://angular-challenges.vercel.app/) ## Contributors ✨ diff --git a/apps/angular/injection-token/.eslintrc.json b/apps/angular/injection-token/.eslintrc.json new file mode 100644 index 0000000..bd48864 --- /dev/null +++ b/apps/angular/injection-token/.eslintrc.json @@ -0,0 +1,19 @@ +{ + "extends": ["../../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts"], + "rules": {}, + "extends": [ + "plugin:@nx/angular", + "plugin:@angular-eslint/template/process-inline-templates" + ] + }, + { + "files": ["*.html"], + "extends": ["plugin:@nx/angular-template"], + "rules": {} + } + ] +} diff --git a/apps/angular/injection-token/README.md b/apps/angular/injection-token/README.md new file mode 100644 index 0000000..8764b23 --- /dev/null +++ b/apps/angular/injection-token/README.md @@ -0,0 +1,13 @@ +# InjectionToken + +> Author: Thomas Laforge + +### Run Application + +```bash +npx nx serve angular-injection-token +``` + +### Documentation and Instruction + +Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/angular/39-injection-token/). diff --git a/apps/angular/injection-token/jest.config.ts b/apps/angular/injection-token/jest.config.ts new file mode 100644 index 0000000..d7105f8 --- /dev/null +++ b/apps/angular/injection-token/jest.config.ts @@ -0,0 +1,22 @@ +/* eslint-disable */ +export default { + displayName: 'angular-injection-token', + preset: '../../../jest.preset.js', + setupFilesAfterEnv: ['/src/test-setup.ts'], + coverageDirectory: '../../../coverage/apps/angular/injection-token', + transform: { + '^.+\\.(ts|mjs|js|html)$': [ + 'jest-preset-angular', + { + tsconfig: '/tsconfig.spec.json', + stringifyContentPathRegex: '\\.(html|svg)$', + }, + ], + }, + transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], + snapshotSerializers: [ + 'jest-preset-angular/build/serializers/no-ng-attributes', + 'jest-preset-angular/build/serializers/ng-snapshot', + 'jest-preset-angular/build/serializers/html-comment', + ], +}; diff --git a/apps/angular/injection-token/project.json b/apps/angular/injection-token/project.json new file mode 100644 index 0000000..a00a467 --- /dev/null +++ b/apps/angular/injection-token/project.json @@ -0,0 +1,95 @@ +{ + "name": "angular-injection-token", + "$schema": "../../../node_modules/nx/schemas/project-schema.json", + "projectType": "application", + "prefix": "app", + "sourceRoot": "apps/angular/injection-token/src", + "tags": [], + "targets": { + "build": { + "executor": "@angular-devkit/build-angular:browser", + "outputs": ["{options.outputPath}"], + "options": { + "outputPath": "dist/apps/angular/injection-token", + "index": "apps/angular/injection-token/src/index.html", + "main": "apps/angular/injection-token/src/main.ts", + "polyfills": ["zone.js"], + "tsConfig": "apps/angular/injection-token/tsconfig.app.json", + "assets": [ + "apps/angular/injection-token/src/favicon.ico", + "apps/angular/injection-token/src/assets" + ], + "styles": ["apps/angular/injection-token/src/styles.scss"], + "scripts": [] + }, + "configurations": { + "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kb", + "maximumError": "1mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "2kb", + "maximumError": "4kb" + } + ], + "outputHashing": "all" + }, + "development": { + "buildOptimizer": false, + "optimization": false, + "vendorChunk": true, + "extractLicenses": false, + "sourceMap": true, + "namedChunks": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "executor": "@angular-devkit/build-angular:dev-server", + "configurations": { + "production": { + "browserTarget": "angular-injection-token:build:production" + }, + "development": { + "browserTarget": "angular-injection-token:build:development" + } + }, + "defaultConfiguration": "development" + }, + "extract-i18n": { + "executor": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "angular-injection-token:build" + } + }, + "lint": { + "executor": "@nx/linter:eslint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": [ + "apps/angular/injection-token/**/*.ts", + "apps/angular/injection-token/**/*.html" + ] + } + }, + "test": { + "executor": "@nx/jest:jest", + "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], + "options": { + "jestConfig": "apps/angular/injection-token/jest.config.ts", + "passWithNoTests": true + }, + "configurations": { + "ci": { + "ci": true, + "codeCoverage": true + } + } + } + } +} diff --git a/apps/angular/injection-token/src/app/app.component.ts b/apps/angular/injection-token/src/app/app.component.ts new file mode 100644 index 0000000..51cf42e --- /dev/null +++ b/apps/angular/injection-token/src/app/app.component.ts @@ -0,0 +1,21 @@ +import { Component } from '@angular/core'; +import { RouterLink, RouterOutlet } from '@angular/router'; + +@Component({ + standalone: true, + imports: [RouterOutlet, RouterLink], + selector: 'app-root', + template: `
+ + +
+ `, + host: { + class: 'p-10 flex flex-col', + }, +}) +export class AppComponent {} diff --git a/apps/angular/injection-token/src/app/app.config.ts b/apps/angular/injection-token/src/app/app.config.ts new file mode 100644 index 0000000..4d6c3cf --- /dev/null +++ b/apps/angular/injection-token/src/app/app.config.ts @@ -0,0 +1,12 @@ +import { ApplicationConfig } from '@angular/core'; +import { provideRouter } from '@angular/router'; + +export const appConfig: ApplicationConfig = { + providers: [ + provideRouter([ + { path: '', pathMatch: 'full', redirectTo: 'video' }, + { path: 'video', loadComponent: () => import('./video.component') }, + { path: 'phone', loadComponent: () => import('./phone.component') }, + ]), + ], +}; diff --git a/apps/angular/injection-token/src/app/data.ts b/apps/angular/injection-token/src/app/data.ts new file mode 100644 index 0000000..393edd0 --- /dev/null +++ b/apps/angular/injection-token/src/app/data.ts @@ -0,0 +1 @@ +export const DEFAULT_TIMER = 1000; diff --git a/apps/angular/injection-token/src/app/phone.component.ts b/apps/angular/injection-token/src/app/phone.component.ts new file mode 100644 index 0000000..073a479 --- /dev/null +++ b/apps/angular/injection-token/src/app/phone.component.ts @@ -0,0 +1,13 @@ +import { Component } from '@angular/core'; +import { TimerContainerComponent } from './timer-container.component'; + +@Component({ + standalone: true, + imports: [TimerContainerComponent], + template: `
+ Phone Call Timer: +

(should be 2000s)

+
+ `, +}) +export default class PhoneComponent {} diff --git a/apps/angular/injection-token/src/app/timer-container.component.ts b/apps/angular/injection-token/src/app/timer-container.component.ts new file mode 100644 index 0000000..30af693 --- /dev/null +++ b/apps/angular/injection-token/src/app/timer-container.component.ts @@ -0,0 +1,21 @@ +import { Component } from '@angular/core'; +import { DEFAULT_TIMER } from './data'; +import { TimerComponent } from './timer.component'; +@Component({ + selector: 'timer-container', + standalone: true, + imports: [TimerComponent], + template: ` +
+ Timer container: +

(timer is {{ timer }}s)

+
+ + `, + host: { + class: 'border rounded-md flex p-4 gap-10', + }, +}) +export class TimerContainerComponent { + timer = DEFAULT_TIMER; +} diff --git a/apps/angular/injection-token/src/app/timer.component.ts b/apps/angular/injection-token/src/app/timer.component.ts new file mode 100644 index 0000000..db5b963 --- /dev/null +++ b/apps/angular/injection-token/src/app/timer.component.ts @@ -0,0 +1,13 @@ +import { Component } from '@angular/core'; +import { toSignal } from '@angular/core/rxjs-interop'; +import { interval } from 'rxjs'; +import { DEFAULT_TIMER } from './data'; + +@Component({ + selector: 'timer', + standalone: true, + template: ` Timer running {{ timer() }} `, +}) +export class TimerComponent { + timer = toSignal(interval(DEFAULT_TIMER)); +} diff --git a/apps/angular/injection-token/src/app/video.component.ts b/apps/angular/injection-token/src/app/video.component.ts new file mode 100644 index 0000000..4ffb28f --- /dev/null +++ b/apps/angular/injection-token/src/app/video.component.ts @@ -0,0 +1,13 @@ +import { Component } from '@angular/core'; +import { TimerContainerComponent } from './timer-container.component'; + +@Component({ + standalone: true, + imports: [TimerContainerComponent], + template: `
+ Video Call Timer: +

(should be the default 1000s)

+
+ `, +}) +export default class VideoComponent {} diff --git a/apps/angular/injection-token/src/assets/.gitkeep b/apps/angular/injection-token/src/assets/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/apps/angular/injection-token/src/favicon.ico b/apps/angular/injection-token/src/favicon.ico new file mode 100644 index 0000000..317ebcb Binary files /dev/null and b/apps/angular/injection-token/src/favicon.ico differ diff --git a/apps/angular/injection-token/src/index.html b/apps/angular/injection-token/src/index.html new file mode 100644 index 0000000..befe4cf --- /dev/null +++ b/apps/angular/injection-token/src/index.html @@ -0,0 +1,13 @@ + + + + + angular-injection-token + + + + + + + + diff --git a/apps/angular/injection-token/src/main.ts b/apps/angular/injection-token/src/main.ts new file mode 100644 index 0000000..514c89a --- /dev/null +++ b/apps/angular/injection-token/src/main.ts @@ -0,0 +1,7 @@ +import { bootstrapApplication } from '@angular/platform-browser'; +import { appConfig } from './app/app.config'; +import { AppComponent } from './app/app.component'; + +bootstrapApplication(AppComponent, appConfig).catch((err) => + console.error(err) +); diff --git a/apps/angular/injection-token/src/styles.scss b/apps/angular/injection-token/src/styles.scss new file mode 100644 index 0000000..77e408a --- /dev/null +++ b/apps/angular/injection-token/src/styles.scss @@ -0,0 +1,5 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +/* You can add global styles to this file, and also import other style files */ diff --git a/apps/angular/injection-token/src/test-setup.ts b/apps/angular/injection-token/src/test-setup.ts new file mode 100644 index 0000000..15de72a --- /dev/null +++ b/apps/angular/injection-token/src/test-setup.ts @@ -0,0 +1,2 @@ +import '@testing-library/jest-dom'; +import 'jest-preset-angular/setup-jest'; diff --git a/apps/angular/injection-token/tailwind.config.js b/apps/angular/injection-token/tailwind.config.js new file mode 100644 index 0000000..38183db --- /dev/null +++ b/apps/angular/injection-token/tailwind.config.js @@ -0,0 +1,14 @@ +const { createGlobPatternsForDependencies } = require('@nx/angular/tailwind'); +const { join } = require('path'); + +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: [ + join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'), + ...createGlobPatternsForDependencies(__dirname), + ], + theme: { + extend: {}, + }, + plugins: [], +}; diff --git a/apps/angular/injection-token/tsconfig.app.json b/apps/angular/injection-token/tsconfig.app.json new file mode 100644 index 0000000..5822042 --- /dev/null +++ b/apps/angular/injection-token/tsconfig.app.json @@ -0,0 +1,10 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../dist/out-tsc", + "types": [] + }, + "files": ["src/main.ts"], + "include": ["src/**/*.d.ts"], + "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"] +} diff --git a/apps/angular/injection-token/tsconfig.editor.json b/apps/angular/injection-token/tsconfig.editor.json new file mode 100644 index 0000000..8ae117d --- /dev/null +++ b/apps/angular/injection-token/tsconfig.editor.json @@ -0,0 +1,7 @@ +{ + "extends": "./tsconfig.json", + "include": ["src/**/*.ts"], + "compilerOptions": { + "types": ["jest", "node"] + } +} diff --git a/apps/angular/injection-token/tsconfig.json b/apps/angular/injection-token/tsconfig.json new file mode 100644 index 0000000..e85865c --- /dev/null +++ b/apps/angular/injection-token/tsconfig.json @@ -0,0 +1,32 @@ +{ + "compilerOptions": { + "target": "es2022", + "useDefineForClassFields": false, + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.app.json" + }, + { + "path": "./tsconfig.spec.json" + }, + { + "path": "./tsconfig.editor.json" + } + ], + "extends": "../../../tsconfig.base.json", + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } +} diff --git a/apps/angular/injection-token/tsconfig.spec.json b/apps/angular/injection-token/tsconfig.spec.json new file mode 100644 index 0000000..1a4817a --- /dev/null +++ b/apps/angular/injection-token/tsconfig.spec.json @@ -0,0 +1,15 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../dist/out-tsc", + "module": "commonjs", + "types": ["jest", "node", "@testing-library/jest-dom"] + }, + "files": ["src/test-setup.ts"], + "include": [ + "jest.config.ts", + "src/**/*.test.ts", + "src/**/*.spec.ts", + "src/**/*.d.ts" + ] +} diff --git a/challenge-number.json b/challenge-number.json index 55abd21..6e455d3 100644 --- a/challenge-number.json +++ b/challenge-number.json @@ -1,6 +1,6 @@ { - "total": 38, + "total": 39, "🟢": 14, - "🟠": 117, + "🟠": 118, "🔴": 207 } diff --git a/docs/src/content/docs/challenges/angular/39-injection-token.md b/docs/src/content/docs/challenges/angular/39-injection-token.md new file mode 100644 index 0000000..ae7f765 --- /dev/null +++ b/docs/src/content/docs/challenges/angular/39-injection-token.md @@ -0,0 +1,31 @@ +--- +title: 🟠 InjectionToken +description: Challenge 39 is about learning the power of dependancy injection +author: Thomas Laforge +challengeNumber: 39 +command: angular-injection-token +sidebar: + order: 118 + badge: New +--- + +## Information + +In this small application, we start with a `VideoComponent` containing a **1-second** timer. The development team decided to use a global constant to store the timer value: `DEFAULT_TIMER`. However, a few weeks later, the product team wants to add a new screen for phone calls called `PhoneComponent`, and we want to reuse the `TimerComponent`. However, the product team wants a timer of **2 seconds**. How can we achieve this? + +## Statement + +Currently, the timer is still 1 second for the `PhoneComponent`. The goal of this challenge is to change the timer value to 2 seconds for the `PhoneComponent`. + +## Constraints + +The use of `@Input` is forbidden. This example is basic, and using `@Input` could be a good option, but in more complex applications, the component we need to update can be deeply nested, making the use of `@Input` a really bad design. + +## Hint + +
+ Hint 1 + +Looking at `InjectionToken` can be of great help. + +
diff --git a/docs/src/content/docs/challenges/rxjs/38-rxjs-catch-error.md b/docs/src/content/docs/challenges/rxjs/38-rxjs-catch-error.md index b158579..743640f 100644 --- a/docs/src/content/docs/challenges/rxjs/38-rxjs-catch-error.md +++ b/docs/src/content/docs/challenges/rxjs/38-rxjs-catch-error.md @@ -6,7 +6,6 @@ command: rxjs-catch-error challengeNumber: 38 sidebar: order: 14 - badge: New --- ## Information diff --git a/docs/src/content/docs/index.mdx b/docs/src/content/docs/index.mdx index 2b88bcf..436245c 100644 --- a/docs/src/content/docs/index.mdx +++ b/docs/src/content/docs/index.mdx @@ -13,7 +13,7 @@ hero: icon: right-arrow variant: primary - text: Go to the latest Challenge - link: /challenges/rxjs/38-rxjs-catch-error/ + link: /challenges/angular/39-injection-token/ icon: rocket - text: Give a star link: https://github.com/tomalaforge/angular-challenges @@ -25,8 +25,8 @@ import { Card, CardGrid } from '@astrojs/starlight/components'; import MyIcon from '../../components/MyIcon.astro'; - - This repository gathers 38 Challenges related to Angular, Nx, RxJS, Ngrx and Typescript. + + This repository gathers 39 Challenges related to Angular, Nx, RxJS, Ngrx and Typescript. These challenges resolve around real-life issues or specific features to elevate your skills.