docs(fr): add french translations for angular easy challenges (tomalaforge#938)

Author: alannelucq

docs/src/content/docs/fr/challenges/angular/1-projection.md

@@ -0,0 +1,45 @@
+---
+title: 🟢 Projection
+description: Le challenge 1 consiste à apprendre à projeter des éléments DOM à travers des composants
+author: thomas-laforge
+contributors:
+ - alannelucq
+challengeNumber: 1
+command: angular-projection
+blogLink: https://medium.com/@thomas.laforge/create-a-highly-customizable-component-cc3a9805e4c5
+videoLink:
+ link: https://www.youtube.com/watch?v=npyEyUZxoIw&ab_channel=ArthurLannelucq
+ alt: Projection video by Arthur Lannelucq
+ flag: FR
+sidebar:
+ order: 1
+---
+
+## Information
+
+Dans Angular, la projection de contenu est une technique puissante pour créer des composants hautement personnalisables. Utiliser et comprendre les concepts liés aux <b>ng-content</b> et <b>ngTemplateOutlet</b> peut grandement améliorer votre capacité à créer des composants réutilisables.
+
+Vous pouvez tout apprendre sur <b>ng-content</b> [ici](https://angular.dev/guide/components/content-projection), de la projection de contenu la plus simple jusqu'à des utilisations plus complexes.
+
+Pour en savoir plus sur <b>ngTemplateOutlet</b>, vous pouvez trouver la documentation de l'API [ici](https://angular.io/api/common/NgTemplateOutlet) avec quelques exemples de base.
+
+Avec ces deux outils en main, vous êtes maintenant prêt à relever le défi.
+
+## Énoncé
+
+Vous commencerez avec une application entièrement fonctionnelle qui comprend un tableau de bord contenant une carte pour les enseignants et une carte pour les élèves. L'objectif est de mettre en place la carte de la ville.
+
+Bien que l'application fonctionne, l'expérience développeur est loin d'être optimale. Chaque fois que vous devez implémenter une nouvelle carte, vous devez modifier le `card.component.ts`. Dans des projets réels, ce composant pourrait être partagé entre de nombreuses applications. Le but du défi est de créer un `CardComponent` qui peut être personnalisé sans aucune modification. Une fois que vous aurez créé ce composant, vous pourrez commencer à implémenter le `CityCardComponent` et vous assurer de ne pas toucher au `CardComponent`.
+
+## Contraintes
+
+- Vous <b>devez</b> refactoriser le `CardComponent` et le `ListItemComponent`.
+- La directive `NgFor` doit être déclarée et rester à l'intérieur du `CardComponent`. Vous pourriez être tenté de la déplacer dans le `ParentCardComponent` comme `TeacherCardComponent`.
+- Le composant `CardComponent` ne doit contenir aucun `NgIf` ni `NgSwitch`.
+- CSS: essayez d'éviter d'utiliser `::ng-deep`. Trouvez un meilleur moyen de gérer le style CSS.
+
+## Challenges Bonus
+
+- Essayez de travailler avec la nouvelle syntaxe de contrôle de flux pour les boucles et les conditions (documentation [ici](https://angular.dev/guide/templates/control-flow))
+- Utilisez l'API des signals pour gérer l'état de vos composants (documentation [ici](https://angular.dev/guide/signals))
+- Pour référencer le template, utilisez une directive au lieu d'une magic string ([Qu'est-ce qui pose problème avec les magic string ?](https://softwareengineering.stackexchange.com/a/365344))

docs/src/content/docs/fr/challenges/angular/21-anchor-navigation.md

@@ -0,0 +1,20 @@
+---
+title: 🟢 Naviguer sur une page
+description: Le challenge 21 consiste à apprendre à utiliser la navigation intégrée d'Angular
+author: thomas-laforge
+contributors:
+ - alannelucq
+challengeNumber: 21
+command: angular-anchor-navigation
+sidebar:
+ order: 4
+---
+
+## Information
+
+Vous commencez avec une application qui possède une navigation de base et une navigation par ancre dans le `HomeComponent`. Cependant, l'utilisation de `href` recrée le chemin à chaque fois et rafraîchit la page.
+
+## Énoncé
+
+- Votre tâche consiste à refactoriser cette application pour utiliser la navigation intégrée afin de mieux s'intégrer dans le Framework Angular. Vous pouvez explorer le router, mais il est préférable de rester dans le template et d'utiliser la directive `RouterLink`.
+- Pour améliorer l'expérience utilisateur, ajoutez un scroll fluide.

docs/src/content/docs/fr/challenges/angular/22-router-input.md

@@ -0,0 +1,28 @@
+---
+title: 🟢 @RouterInput()
+description: Challenge 22 is about using the @Input decorator to retreive router params.
+author: thomas-laforge
+contributors:
+ - alannelucq
+challengeNumber: 22
+command: angular-router-input
+blogLink: https://medium.com/ngconf/accessing-route-params-in-angular-1f8e12770617
+sidebar:
+ order: 5
+---
+
+## Information
+
+Dans cette application, nous récupérons trois informations depuis le routeur dans notre `TestComponent` :
+
+- `testId` qui est situé dans les paramètres de l'URL.
+- `user` qui est situé dans les paramètres de la requête de l'URL.
+- `permission` qui est défini dans l'objet `data` de la route.
+
+Jusqu'à la version 15 d'Angular, nous devions utiliser le `ActivatedRoute` pour obtenir toutes ces informations et les récupérer via des observables pour écouter sur les changements d'URL.
+
+Depuis la version 16, Angular a introduit un nouvel `Input` qui peut écouter les changements de données d'une route. Vous pouvez en savoir plus [ici](https://medium.com/ngconf/accessing-route-params-in-angular-1f8e12770617).
+
+## Énoncé
+
+L'objectif de cet exercice est de refactoriser le code pour utiliser la nouvelle stratégie `RouterInput`.

docs/src/content/docs/fr/challenges/angular/31-module-to-standalone.md

@@ -0,0 +1,29 @@
+---
+title: 🟢 Module vers Standalone
+description: Le challenge 31 consiste à migrer une application basée sur des modules vers une application standalone.
+author: thomas-laforge
+contributors:
+ - alannelucq
+challengeNumber: 31
+command: angular-module-to-standalone
+sidebar:
+ order: 6
+---
+
+## Information
+
+Dans la version 14 d'Angular, les composants standalone ont été introduits et sont devenus stables dans la version 15. Si vous ne les avez pas encore essayés, il n'est jamais trop tard. Vous pouvez les essayer dans ce challenge.
+
+L'objectif est de voir comment **Nx** et les **composants standalone** fonctionnent ensemble, et d'expérimenter le processus de découplage de votre application avec la bibliothèque Nx et les composants standalone.
+
+Les composants standalone sont très simples à comprendre mais les utilisations de ces composants dans **le routing et via du lazy-loading** peuvent être un peu plus difficiles à appréhender. Ce challenge vous permettra de manipuler des composants à différents niveaux d'imbrication et de travailler avec des routes qui utilisent du lazy loading.
+
+Après avoir complété ce défi, les composants standalone n'auront plus aucun secret pour vous.
+
+## Énoncé
+
+L'objectif de ce challenge est de migrer votre application depuis des composants basés sur des modules vers des composants standalone.
+
+## Note
+
+Vous pouvez également tester le [schematic Angular](https://angular.dev/reference/migrations/standalone) pour migrer les NgModule vers des composants standalone. _(Comme nous utilisons Nx, commencez votre commande par nx au lieu de ng)_

docs/src/content/docs/fr/challenges/angular/46-simple-animations.md

@@ -0,0 +1,48 @@
+---
+title: 🟢 Animations Simples
+description: Le challenge 46 consiste à apprendre comment utiliser l'API d'animations intégrée dans Angular
+author: sven-brodny
+contributors:
+ - alannelucq
+challengeNumber: 46
+command: angular-simple-animations
+sidebar:
+ order: 17
+---
+
+## Information
+
+Il s'agit du premier des deux challenges sur les animations. Le but de cette série est de maîtriser les animations en Angular.
+
+Des animations bien conçues peuvent rendre votre application plus agréable et plus intuitive à utiliser, mais elles ne sont pas seulement cosmétiques. Les animations peuvent améliorer votre application et l'expérience utilisateur de plusieurs façons :
+
+- Sans animations, les transitions de pages web peuvent sembler abruptes et désagréables.
+- Le mouvement améliore grandement l'expérience utilisateur, les animations permettent donc aux utilisateurs de percevoir la réponse de l'application à leurs actions.
+- De bonnes animations attirent intuitivement l'attention de l'utilisateur là où elle est nécessaire.
+
+Je vous recommande de lire la [documentation officielle](https://angular.dev/guide/animations). Vous y apprendrez tout ce qui est nécessaire pour réussir ce challenge.
+
+Vous pouvez également regarder cet [exemple fonctionnel](https://svenson95.github.io/ng-xmp-animations/) et ce [repertoire git](https://github.com/svenson95/ng-xmp-animations) pour vous inspirer.
+
+## Énoncé
+
+L'objectif de ce challenge est d'ajouter des animations qui doivent être déclenchées lorsque l'utilisateur arrive sur la page ou la recharge.
+
+## Contraintes
+
+- N'utilisez aucun CSS et utilisez l'API intégrée d'Angular `@angular/animations`.
+- Ne déclenchez pas les animations avec un bouton comme dans les exemples, mais lorsque l'utilisateur entre ou recharge la page.
+
+### Niveau 1
+
+Ajoutez une animation de fondu ou de déplacement pour les paragraphes sur le côté gauche.
+
+<video controls src="https://github.com/tomalaforge/angular-challenges/assets/46655156/a43c3995-16ef-4d1f-bcfc-602b4ce80937">
+</video>
+
+### Niveau 2
+
+Ajoutez une animation en cascade pour la liste sur le côté droit.
+
+<video controls src="https://github.com/tomalaforge/angular-challenges/assets/46655156/1a01af1b-44fc-4616-8793-681219f9d8bc">
+</video>

docs/src/content/docs/fr/challenges/angular/5-crud-application.md

@@ -0,0 +1,52 @@
+---
+title: 🟢 Application CRUD
+description: Le challenge 5 consiste à refactoriser une application CRUD
+author: thomas-laforge
+contributors:
+ - alannelucq
+challengeNumber: 5
+command: angular-crud-application
+sidebar:
+ order: 2
+---
+
+## Information
+
+Communiquer et synchroniser un état global ou local avec votre backend est au cœur de toute application. Vous devrez maîtriser les meilleures pratiques suivantes pour construire des applications Angular solides et fiables.
+
+## Énoncé
+
+Dans cet exercice, vous avez une petite application CRUD dans laquelle vous pouvez récupérer, mettre à jour et supprimer des tâches.
+
+Pour le moment, nous avons un exemple fonctionnel mais qui est rempli de nombreuses mauvaises pratiques.
+
+### Étape 1 : refactoriser avec les meilleures pratiques
+
+Ce que vous devrez faire:
+
+- Évitez d'utiliser **any** comme type. Utiliser des interfaces pour tirer parti du système de typage de Typescript permet d'éviter les erreurs.
+- Utilisez un **service séparé** pour tous vos appels HTTP et utilisez un **Signal** pour votre liste de tâches.
+- Ne **mutez** pas les données
+
+```typescript
+// À éviter
+this.todos[todoUpdated.id - 1] = todoUpdated;
+
+// Privilégier une approche comme celle-ci, mais qui doit être améliorée car nous voulons toujours conserver le même ordre
+this.todos = [...this.todos.filter((t) => t.id !== todoUpdated.id), todoUpdated];
+```
+
+### Étape 2 : Améliorer
+
+- Ajoutez un bouton **Supprimer** : _<a href="https://jsonplaceholder.typicode.com/" target="_blank">Documentation de l'API fictive</a>_
+- Gérez correctement les **erreurs**. _(De façon globale)_
+- Ajoutez un **indicateur de chargement** global. _Vous pouvez utilisez le MatProgressSpinnerModule_
+
+### Étape 3 : Maintenabilité !! (ajoutez des tests)
+
+- Ajoutez 2/3 tests
+
+### Étape 4 : Effet waouw !!! (maîtrisez votre état).
+
+- Utilisez le **component store de ngrx**, **ngrx/store**, **rxAngular**, **tanstack-query** ou **ngrx/signal-store** pour gérer l'état local de votre composant.
+- Ayez un indicateur de chargement/erreur **localisé** , par exemple uniquement sur la tâche en cours de traitement et **désactivez** tous les boutons sur cette tâche. _(Astuce: vous devrez créer un ItemComponent)_

docs/src/content/docs/fr/challenges/angular/8-pure-pipe.md

@@ -0,0 +1,37 @@
+---
+title: 🟢 Pipe pur
+description: Le challenge 8 consiste à créer un pipe pur
+author: thomas-laforge
+contributors:
+ - alannelucq
+challengeNumber: 8
+command: angular-pure-pipe
+blogLink: https://medium.com/ngconf/deep-dive-into-angular-pipes-c040588cd15d
+sidebar:
+ order: 3
+---
+
+## Information
+
+Il s'agit du premier des trois challenges `@Pipe()`. L'objectif de cette série est de maîtriser les **pipes** en Angular.
+
+Les pipes sont un moyen très puissant de transformer les données dans votre template. La différence entre appeler une fonction et un pipe réside dans le fait que les pipes purs sont mémorisés. Ils ne seront donc pas recalculés à chaque cycle de détection des changements si les données en entrée n'ont pas changées.
+
+Les pipes sont conçus pour être efficaces et optimisés pour la performance. Ils utilisent des mécanismes de détection des changements pour ne recalculer la valeur que si la donnée en entrée change, ce qui minimise les calculs inutiles et améliore les performances de rendu.
+
+Par défaut, un pipe est pur. Vous devez être conscient que définir `pure` à false est susceptible d'être inefficace, car cela augmente le nombre de rerenders.
+
+:::note
+Un pipe **pur** est appelé uniquement lorsque la valeur change.
+Un pipe **impur** est appelé à chaque cycle de détection des changements.
+:::
+
+Il existe quelques pipes prédéfinis utiles comme DatePipe, UpperCasePipe et CurrencyPipe. Pour en savoir plus sur les pipes dans Angular, consultez la documentation de l'API [ici](https://angular.dev/guide/pipes).
+
+## Énoncé
+
+Dans cet exercice, vous devez refactoriser une fonction de transformation à l'intérieur d'un composant qui est appelée dans votre template. L'objectif est de convertir cette fonction en un pipe.
+
+## Contraintes
+
+- Doit être fortement typé