Les composants

0
Premiers pas avec Angular 5

Qu’est ce qu’un composant ?

Les composants (components) sont les éléments de base d’une application développé avec Angular. Toutes les informations importantes se trouve dans celui-ci.

  • Les imports : nécessaire au fonctionnement du composant.
  • Les décorateurs : On y trouve le template du composant, la feuille de style associée mais aussi les animations, etc.
  • La classe : Là où votre classe se trouve physiquement.

Les composants Angular se trouve dans le dossier /src/app de votre application.

> src
  > app
    app.component.ts     // Le fichier du composant
    app.component.html   // Son template
    app.component.scss   // Sa feuille de style

Le fichier composant de base

Lors de la création d’une application avec Angular CLI, génère le composant app. Il suffit d’ouvrir le fichier TypeScript app.component.ts :

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app';
}

Nous y trouvons dans un premier temps les imports, les décorateurs de ce dernier (selector, templateUrl et styleUrls) et enfin la classe du composant.

Ici, on remarque que le sélecteur est “app-root”. Ouvrez le fichier /src/index.html est noté la présence de ce sélecteur :

[...]
<body>
 <app-root></app-root>
</body>
</html>

C’est à cet endroit que le composant se chargera.

 

Lorsque vous vous rendez sur http://localhost:4200/ lors ng serve est lancé, vous noterez qu’il s’agit ni plus ni moins du code stocké dans le template html (app.component.html) du composant app.

Créer un nouveau composant

L’Angular CLI permet davantage que de démarrer de nouveau projet. En effet, elle permet aussi de créer de nouveau composants. Nous allons créer le nouveau composant “Accueil”.

Pour cela, en mode console tapez :

$ ng generate component accueil

De nouveaux fichiers vont alors se générer dans src/app/accueil :

create src/app/accueil/accueil.component.html (26 bytes)
create src/app/accueil/accueil.component.spec.ts (635 bytes)
create src/app/accueil/accueil.component.ts (274 bytes)
create src/app/accueil/accueil.component.scss (0 bytes)
update src/app/app.module.ts (481 bytes)

La syntaxe de création de composant peut s’utiliser grâce aux alias :

$ ng g c a-propos

Ici, nous avons créé un nouveau composant “a-propos”.

L’imbrication de composant

Nous venons de créer deux nouveaux composants. Ouvrez maintenant votre template app (dans src/app/app.component.html) et remplacez son contenu par :

<ul>
 <li><a routerLink="accueil">Accueil</a></li>
 <li><a routerLink="a-propos">A propos</a></li>
</ul>

<app-accueil></app-accueil>

<router-outlet></router-outlet>

On y a placé le sélecteur app-accueil de notre composant créé précédemment. Pour tester, il suffit de relancer le serveur si ce n’est déjà fait et d’aller sur http://localhost:4200/ !

Les Composants aperçu

No comments