Aller au contenu principal

TP 2 : Composants

Objectifs​

  • Créer et utiliser des composants Angular

Instructions​

Création de composants​

  • Notre fichier app.component.ts commence à être un peu encombré. Créons quelques composants pour le rendre plus leger.
  • Nous allons d'abord nous concentrer sur les trois composants suivants :
  • header
  • menu
  • album-of-the-day

[ASTUCE] Voici une idée de ce que nous voulons faire. Les couleurs ici sont juste pour vous aider à visualiser les composants

Arbre de composant

[ASTUCE] Le composant menu est intégré dans le composant header!

  • Chaque composant aura son propre template, style et logique.
  • Vous devez déplacer le css du fichier app.component.css vers les nouveaux fichiers css des composants.
  • Exemple avec le composant menu :
<nav>
  <a>My collection</a>
  <a>Add an Album</a>
</nav>
nav {
  background-color: rgba(0,0,0,0.5);
  color: white;
  text-align: center;
  padding: 1em;
}
nav a {
  display: inline-block;
  margin: 0 10px;
  text-decoration: none;
}
  • Pour le composant album-of-the-day, vous devez également déplacer une partie de la logique dans le fichier ts :
    • La variable albumOfTheDay et sa fonction.
  • Créez un nouveau composant footer qui affichera l'année en cours.

Conclusion​

  • Après tous les changements, le fichier app.component.ts devrait seulement contenir les variables title et searchTerm.
export class AppComponent {
  title = 'Mymusicotek'
  searchTerm: string = ''
}