Skip to main content

Lab 1.2: Template

Objectives​

  • Create and run an Angular project
  • Understand the structure of an Angular project
  • Playing with variables in the template
  • Creating a type/interface model and using it in the code

Instructions​

  • Fetch the project from the repository
  • Install the dependencies using npm install
  • Run the project using ng serve

Simple modifications​

  • In the app.component.ts file, modify the title variable to display the name you want for your application. Doing this, you will see the new name in the body of your component. It will not be displayer in the header and footer yet.
  • Create a currentYear variable and extract the year from a Date.
  currentYear = new Date().getFullYear();
  • Replace the date in the footer with the currentYear variable.

Creating a model and using it​

  • In a file src/app/model/album.model.ts Create an Album interface with the following properties: title, artist, releaseDate, price,hidden, genre, description.
export interface Album {
   title: string;
   artist: string;
   releaseDate: Date;
   price: number;
   genre: string;
   hidden: boolean;
   description: string;
   }
  • Create a variable called albumOfTheDay in the app.component.ts file and assign an object that respects the Album interface using an album you like.
albumOfTheDay: Album = {
   // your album properties here
};
  • Display the albumOfTheDay in the template using the albumOfTheDay variable properties.

Click event​

  • When clicking on the button, replace the albumOfTheDay with another value. Template should be updated automatically. You will need to create a function for that (use the click event to call that function).

ngModel​

  • We want the search box to be able to modify a variable called searchTerm
  • Create a variable searchTerm in the app.component.ts file.
 searchTerm: string = '';
  • Bind the input to the searchTerm variable using [(ngModel)].
  • Display the searchTerm variable in the template in front of "You are searching:"

[HINT]: Dont forget to import the FormsModule in the app.module.ts file