Back

Créer un composant avec Angular

Créer un composant avec Angular

  1. Objectifs

  2. Définition

  3. Créer un composant

    1. Avec ng generate component

      • Présentation
        • Angular CLI est un outil pour initialiser, développer et maintenir des applications Angular.
        • Nous allons maintenant créer notre premier composant Angular. Pour cela nous allons utiliser Angular Cli
        • Pour créer un composant, il faut tout d’abord se placer dans le dossier de son projet.
        • Mettez-vous à la racine de votre projet et tapez :ng generate component, suivie du nom du composant
        • Cette commande peut être abrégée en écrivant ng g c
      • Conventions de nommage appliquées par le CLI
        • Quand vous créez un composant avec Angular CLI, ce dernier applique automatiquement quelques conventions de nommage :
          • Le suffixe Component est ajouté automatiquement au nom passé en paramètre. Il ne faut donc PAS écrire ng g c apprenantsComponent, car cela créerait la classe apprenantsComponentComponent.
          • Le préfixe app- est ajouté automatiquement au sélecteur du composant. Dans notre exemple, le sélecteur est donc app-apprenants.
          • La classe du composant est automatiquement formatée en upper camel case. Exemple : la commande ng g c apprenants crée une classe apprenantsComponent.
          • Les fichiers du composant sont automatiquement convertis en dash-case et le type .component est ajouté. Exemple : la commande ng g c apprenants crée des fichiers apprenants.component.XXX.



      • Création
        • Maintenant on va créer un premier composant apprenants/ListeApprenant: ng g c apprenants/ListeApprenant

          • Créer un composant avec Angular

        • Cette commande nous permet de créer tous les fichiers liés à notre component, tout en mettant à jour le fichier app.module.ts, et ce, en déclarant le nouveau component créé :

          • Créer un composant avec Angular

        • Dans le répertoire src/app du projet, le CLI va créer un répertoire apprenants qui contient 4 fichiers correspondant au composant :

          • Créer un composant avec Angular

        • Voilà, nous avons notre premier composant. Pour l’utiliser, il suffit d’ajouter la balise dans la vue de notre composant racine app.component.html en utilisant le selector

    2. Créer un composant manuellement ?

      • Pour créer un composant manuellement en doit créer des fichiers analogues à ceux générés par le CLI. Ça n’a pas grand intérêt, puisque le CLI fait déjà ça très bien et qu’en plus on peut personnaliser son fonctionnement avec les techniques vues précédemment.

    3. Exemple

      • Pour créer facilement des composants Angular, on peut utiliser la commande ng generate component NomComposant
      • Dans notre exemple, nous allons créer deux composants : about et contact

        • Créer un composant avec Angular

    4. Déclaration du composant

      • Pour utiliser un composant, ce dernier doit être déclaré dans le module :

        • Créer un composant avec Angular




author avatar
Riadh HAJJI

Riadh HAJJI

You may also like

Angular NgModel
3 juin, 2020

Angular NgModel Angular NgModel Objectifs Connaitre la directive ngModul d’angular Etre capable d’utiliser la directive ngModul d’angular Présentation Angular NgModel est une directive intégrée qui crée une instance FormControl à partir du modèle de domaine et la lie à un …

Validation de formulaires en Angular
31 mai, 2020

Formulaire d’authentification 1 avec Angular Formulaire d’authentification 2 avec Angular Validation de formulaires en Angular Validation de formulaires en Angular Objectifs Etre capable de configurer et de valider de formulaire avec Angular Présentation Les formulaires sont le pilier des applications …

Les directives structurelles
28 mai, 2020

Les types de directives dans Angular Les directives structurelles Les directives structurelles Objectifs Apprendre à utiliser les directives structurelles. Etre capable d’utiliser *ngIf , *ngFor et *ngSwitch dans Angular Définition Les directives structurelles interagissent avec le conteneur de vue actuel …