TP 1.2 : Template

Objectifs

• Cloner un projet existant
• Comprendre la structure d'un projet Angular
• Manipuler des variables dans le template
• Créer un model de type type ou interface et l'utiliser dans le code

Instructions

• Récupérez le projet depuis le dépôt
• Installez les dépendances en utilisant npm install
• Exécutez le projet avec ng serve

Modifications simples

• Dans le fichier app.component.ts, modifiez la variable title pour afficher le nom que vous souhaitez avoir pour votre application. En faisant cela, vous verrez le nouveau nom dans le corps de votre composant. Il ne sera pas encore affiché dans l'en-tête et le pied de page.
• Créez une variable currentYear et extrayez l'année à partir d'une date.

  currentYear = new Date().getFullYear(); 

• Remplacez la date dans le pied de page avec la variable currentYear.

Création d'un modèle et utilisation

• Dans un fichier src/app/model/album.model.ts, créez une interface Album avec les propriétés suivantes : title, artist, releaseDate, price, hidden, genre, description.

export interface Album {
   title: string;
   artist: string;
   releaseDate: Date;
   price: number;
   genre: string;
   hidden: boolean;
   description: string;
}

• Créez une variable appelée albumOfTheDay dans le fichier app.component.ts et assignez un objet qui respecte l'interface Album.

albumOfTheDay: Album = {
   // vos propriétés d'album ici
};

• Affichez albumOfTheDay dans le template en utilisant les propriétés de la variable albumOfTheDay.

Événement de clic

• Lors du clic sur le bouton, remplacez albumOfTheDay par une autre valeur. Le template doit se mettre à jour automatiquement. Vous aurez besoin de créer une fonction pour cela (utilisez l'événement click pour appeler cette fonction).

ngModel

• Nous souhaitons que la boîte de recherche puisse modifier une variable appelée searchTerm
• Créez une variable searchTerm dans le fichier app.component.ts.

 searchTerm: string = '';

• Liez l'entrée à la variable searchTerm en utilisant [(ngModel)].
• Affichez la variable searchTerm dans le template devant "Vous recherchez :"

[CONSEIL] : N'oubliez pas d'importer le FormsModule dans le fichier app.module.ts