Angular - 2-11 Exercice1

Alors il est temps de mettre en pratique ce que vous avez appris sur les composants. Dans ce travail, vous allez créer, utiliser et styliser vos propres composants et voir comment vous pouvez construire votre application Angular avec des composants.

Alors, où en êtes-vous ? Voyons ensemble ma solution.

La première tâche était de créer deux nouveaux composants, un manuellement et avec la CLI. Je vais donc commencer par le premier, que je vais échanger manuellement. Je vais créer un nouveau dossier et je vais le nommer "warning alert". Et là-dedans, je vais créer un nouveau fichier qui s'appellera "warning-alert.component.ts".

Suite à cette convention d'appellation, j'ai expliqué maintenant dans ce fichier TypeScript, je vais exporter une classe qui s'appellera aussi "warning alert component" en suivant cette convention d'être descriptif de ce qu'il contient. Ici, je vais ajouter le décorateur de composant. Et comme vous l'avez appris, le décorateur de composants doit être importé. Nous devons donc importer "Component" depuis le noyau angulaire comme ceci. Avec cet import ajouté, nous devons configurer les composants pour qu'Angular soit capable de faire quelque chose avec eux. Nous devons absolument ajouter un modèle et nous devrions également ajouter un sélecteur ici afin que nous puissions l'utiliser.

Maintenant, le sélecteur pourrait simplement être "app-warning-alert" encore une fois pour avoir un sélecteur unique et le modèle pourrait pointer vers un fichier externe ou utiliser un modèle en ligne. Pour ce composant, je vais cependant utiliser le modèle en ligne. Bien sûr, vous êtes libre de choisir le fichier externe. Et je vais simplement revenir à cette année, créer une chaîne de caractères multiligne où j'ai un paragraphe dans lequel je dis que c'est un avertissement, vous êtes en danger, peu importe ce que vous voulez. C'est mon premier composant pour le moment.

Maintenant, je vais traiter le deuxième composant avec la CLI. Donc dans le terminal, je peux en créer un nouveau avec "ng generate component", ou comme je vous l'ai dit, en raccourci "ng g c". Et maintenant, ce sera l'alerte de succès. Donc le nom sera "Success Alert". Cela va me donner un dossier d'alerte de succès avec tous ces fichiers. Je n'ai pas besoin du fichier de test ici, donc nous allons le supprimer. Et maintenant, dans ce dossier, nous avons un fichier TypeScript. On a un fichier HTML. À titre d'information, vous pouvez ignorer ce constructeur et l'utiliser pour n'importe quoi. Je reviendrai sur ce point plus tard et ici, je veux sortir un autre message. On va mettre "C'est un succès", c'est mon message de succès.

Donc, si les deux composants sont créés, j'ai aussi déjà ajouté leurs modèles, le contenu des modèles. Maintenant, nous devrions les afficher l'un en dessous de l'autre ici dans le composant de l'application. Donc je vais le faire juste en dessous de ce paragraphe. J'ajouterai peut-être une ligne horizontale pour les séparer, puis j'ajouterai le composant "app-warning-alert" et "app-success-alert". Et maintenant, si nous sauve