Angular - 2-11 Exercice1

Il est temps de mettre en pratique ce que nous avons appris sur les composants. Dans cet exercice, nous allons créer deux composants Angular, les utiliser et les styliser, afin de voir comment on construit une application Angular à partir de briques réutilisables.

Création des deux composants

  • Composant warning-alert (création manuelle) : créer un dossier warning-alert/, un fichier warning-alert.component.ts, exporter la classe WarningAlertComponent, ajouter le décorateur @Component({...}) importé depuis @angular/core avec un selector: 'app-warning-alert' et un template inline qui affiche un message d'avertissement.
  • Composant success-alert (création via CLI) : exécuter ng generate component success-alert (raccourci ng g c success-alert), supprimer le fichier .spec.ts si on n'en a pas besoin, puis modifier le template HTML pour afficher un message de succès.

Côté AppComponent, on insère les deux nouvelles balises sous le contenu existant : <app-warning-alert></app-warning-alert> et <app-success-alert></app-success-alert>, séparées par un <hr>. À la sauvegarde, Angular lève une erreur : le composant WarningAlertComponent n'est pas reconnu. Pourquoi ? Parce que le CLI a déclaré SuccessAlertComponent automatiquement dans app.module.ts, mais WarningAlertComponent (créé à la main) doit être ajouté manuellement dans les declarations du @NgModule, avec l'import correspondant.

Une fois le module corrigé, l'application affiche bien les deux alertes. Reste à les styliser : pour warning-alert, on utilise la propriété styles en inline dans le décorateur (un tableau de chaînes CSS multilignes) — on applique un fond rouge clair, du padding et une bordure rouge. Pour success-alert, on utilise plutôt le fichier styles externe déjà référencé par le CLI, avec une teinte verte. Résultat : deux jolies boîtes d'alerte, l'une rouge, l'autre verte. Cet exercice a permis de pratiquer la création de composants des deux manières (manuelle et CLI) et de comprendre pourquoi un composant doit être déclaré dans son module pour fonctionner.

En résumé

Cet exercice pratique vous enseigne à créer et intégrer des composants Angular de deux manières : manuellement (composant warning alert) et via le CLI (composant success alert). Vous découvrez comment déclarer les composants dans le module, les utiliser via leur sélecteur et les styliser pour les rendre visuellement distincts avec des boîtes d'alerte colorées (rouge pour warning, vert pour success).

Points clés

  • Créer un composant Angular manuellement : dossier, fichier .ts avec décorateur @Component, et template HTML
  • Générer un composant via le CLI Angular avec la commande `ng generate component` (raccourci `ng g c`)
  • Déclarer et importer les composants dans le module Angular pour qu'ils soient reconnus par l'application
  • Utiliser les composants dans le template principal en référençant leur sélecteur (ex: `<app-warning-alert></app-warning-alert>`)
  • Styliser les composants avec CSS inline (propriété `styles`) ou fichier externe (propriété `styleUrls`)
  • Comprendre le cycle de vie d'un composant : déclaration, import, utilisation et rendu dans le DOM

Questions fréquentes

Pourquoi le composant warning alert n'est-il pas reconnu après l'ajout dans le template ?

Parce qu'il n'a pas été déclaré dans le module Angular. Vous devez importer la classe du composant et l'ajouter à la liste des `declarations` du module pour qu'Angular le reconnaisse.

Quelle est la différence entre créer un composant manuellement et via le CLI ?

Le CLI génère automatiquement tous les fichiers (composant, template HTML, CSS et test), exporte la classe et met à jour le module. Manuellement, vous devez faire ces étapes vous-même, ce qui approfondit votre compréhension de la structure interne d'un composant.

Peut-on utiliser du CSS externe au lieu de CSS inline pour styliser un composant ?

Oui, vous pouvez référencer un fichier CSS externe dans le décorateur @Component avec la propriété `styleUrls`, comme montré pour le composant success alert. Les deux approches sont valides selon votre préférence et votre organisation du projet.