feat(injectionToken): create new challenge on injectionToken

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
+
+<details>
+  <summary>Hint 1</summary>
+
+Looking at `InjectionToken` can be of great help.
+
+</details>

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

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';
 
 <CardGrid>
-<Card title="38 Challenges">
-    This repository gathers 38 Challenges related to <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>, <b>Ngrx</b> and <b>Typescript</b>. 
+<Card title="39 Challenges">
+    This repository gathers 39 Challenges related to <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>, <b>Ngrx</b> and <b>Typescript</b>. 
     These challenges resolve around real-life issues or specific features to elevate your skills.
 </Card>