حالات تطبيقية في Angular

Vous devez créer un composant Angular qui affiche une liste de produits (nom, prix). Les données peuvent être définies directement dans le composant sous forme de tableau. Décrivez comment vous créeriez le composant, comment vous stockeriez les données, et comment vous utiliseriez *ngFor dans le template pour afficher la liste.

Vous devez créer un bouton dans un composant Angular qui, lorsqu’il est cliqué, affiche un message dans la page (par exemple : “Bouton cliqué !”). Décrivez comment vous implémentez la méthode dans le composant et comment vous utilisez (click) dans le template pour déclencher l’action.

On vous demande de créer un composant avec un champ <input> permettant à l’utilisateur de saisir son nom. Le nom doit s’afficher en temps réel sous le champ. Expliquez comment vous mettez en place le two-way binding avec [(ngModel)] et comment vous affichez la valeur dans le template.

Vous devez créer un service Angular permettant d’appeler une API REST qui retourne une liste d’utilisateurs. Le composant doit récupérer les données depuis ce service et les afficher dans la page. Décrivez comment vous créez le service, comment vous utilisez HttpClient, comment vous appelez le service dans un composant et comment gérer l’affichage asynchrone avec Observable ou subscribe().

On vous demande de créer un formulaire réactif permettant de saisir un utilisateur avec les champs : nom, email et âge. Le nom doit être obligatoire, l’email doit respecter le format email, et l’âge doit être supérieur à 0. Décrivez comment mettre en place FormGroup, FormControl, les validateurs et l’affichage des messages d’erreur dans le template.

Vous devez configurer le système de routing d’une application Angular pour permettre la navigation entre une page “Accueil” et une page “Détails”. Décrivez comment déclarer les routes dans AppRoutingModule, comment utiliser <router-outlet>, et comment naviguer vers la page Détails via un lien ou via Router.navigate() dans un composant.

Vous devez refactorer une application monolithique Angular pour : (1) découper en plusieurs feature modules chargés paresseusement (lazy-loaded) via le routeur, (2) mettre en place une stratégie de préloading adaptée, (3) rendre l’ensemble compatible avec le rendu côté serveur (Angular Universal) et (4) implémenter le transfert d’état (State Transfer) pour éviter les doubles requêtes HTTP après SSR. Tâche : décrire la structure des modules, les routes à lazy-load, la stratégie de préchargement (custom preloading strategy), la gestion des guards/auth sur modules lazy, et la manière d’utiliser TransferState pour hydrater les données côté client. Mentionnez les pièges courants (providers singletons, lazy-loaded injectors, erreurs CORS en SSR), et proposez des tests d’intégration pour valider le comportement SSR + client.

Votre mission est de concevoir et packager une bibliothèque Angular (Angular Library) contenant plusieurs composants UI (Modal, Table triable, Dropdown, Toast) destinés à être réutilisés par plusieurs applications. Exigences : respect strict des règles d’accessibilité (WCAG) : focus management, ARIA, navigation clavier ; theming via CSS variables / SASS (tokens de design) et support dark/light ; tests unitaires (Jest/Karma) et tests d’accessibilité automatisés (axe-core) ; documentation et exemples (Storybook) ; empaquetage et publication (ng-packagr) avec API publique stable (breaking changes gérés via versioning). Expliquez l’architecture (monorepo/ng-packagr), comment garantir l’isolation des styles, la stratégie de breaking changes et comment automatiser la vérification accessibilité et la CI/CD de publication.

Une page affiche une liste paginée de 50 000 éléments avec des composants enfants complexes (badges, mini-graph, actions). L’application subit des ralentissements importants lors du tri, du filtrage et du scroll. Tâche : proposer et implémenter (conceptuellement) une stratégie d’optimisation qui combine au moins : ChangeDetectionStrategy.OnPush, trackBy, virtual scrolling (cdk-virtual-scroll-viewport), découplage des calculs lourds (Web Worker ou debouncing/RxJS), et pagination côté backend ou lazy loading des vues. Expliquez comment mesurer l’amélioration (outils, métriques), les compromis éventuels (consistance UI vs performance) et comment garantir que les composants enfants reçoivent correctement les mises à jour sans provoquer de re-renders inutiles.