Aller au contenu

Créez un formulaire dans un composant dédié

Objectifs de ce chapitre

  • ✔️
    Générez un nouveau composant
    Utilisez la CLI Angular pour créer un nouveau composant.

  • ✔️
    Comprendre les options de la CLI Angular
    Apprenez à configurer la génération de composants avec la CLI Angular.

Création de composants

🎓 Instructions

  1. Exécutez la commande suivante dans votre terminal :

    Fenêtre de terminal
    ng generate component task-form

    ou la version courte

    Fenêtre de terminal
    ng g c task-form
  2. Vous devriez voir un nouveau dossier appelé task-form dans le dossier src/app.

Options de la CLI Angular

La CLI Angular fournit plusieurs options pour personnaliser le processus de génération de composants. Vous pouvez ajouter ces options lors de la commande précédente. Par exemple, pour éviter de générer un composant dans un nouveau dossier, vous pouvez exécuter la commande suivante :

Fenêtre de terminal
ng generate component task-form --flat

ou

Fenêtre de terminal
ng g c task-form --flat

Si vous souhaitez que certaines options soient définies par défaut pour tous les composants, vous pouvez les ajouter au fichier angular.json situé à la racine de votre projet.

Pour le projet actuel, nous avons déjà défini les options suivantes :

"@schematics/angular:component": {
"skipTests": true,
"standalone": false
},

Cela évite de créer des fichiers de test et de désactiver la nouvelle fonctionnalité Standalone. Ces options ont été ajoutées au fichier angular.json lorsque vous avons créé le projet avec la CLI Angular.

Dans cet atelier, vous n’aborderez pas les connaissances sur les tests. Ce sera un sujet important à développer ultérieurement.

✔️ Ce que vous avez appris

Vous avez utilisé la CLI d’Angular pour créer un nouveau composant. C’est le deuxième composant que vous avez créé dans ce projet. Une telle action est courante dans le développement Angular et la CLI Angular facilite et optimise ce procédé. Si nécessaire, vous pouvez personnaliser le processus de génération de composants avec les options de la CLI Angular.

🔗 Ressources