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

[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.

Composant Footer

• 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 = ''
}