Featured resource
2025 Tech Upskilling Playbook
Tech Upskilling Playbook

Build future-ready tech teams and hit key business milestones with seven proven plays from industry leaders.

Check it out
  • Lab
    • Libraries: If you want this lab, consider one of these libraries.
    • Core Tech
Labs

Build an Album Store Product Page with Angular

In this code lab, you'll follow instructions to build a music album store product page with Angular 5.x. You'll create several different components, a Service class to request JSON data over HTTP, and navigate between components with the Angular Router.

Lab platform
Lab Info
Level
Intermediate
Last updated
Aug 01, 2025
Duration
3h 5m

Contact sales

By filling out this form and clicking submit, you acknowledge our privacy policy.
Table of Contents
  1. Challenge

    The Product Description Component

    In this project you’ll follow along with our instructions and build a music album store product page with Angular 5.x. You’ll create several different components, a Service class to request JSON data over HTTP, and navigate between components with the Angular Router.

    In this module you'll refactor the existing HTML in the Product Page template over to a new component called Product Description.

    To run the project, in the Terminal, type in npm start. ### Solution The solution can be found in the solution directory.

  2. Challenge

    Creating a Service to Get Album Data

    In this module you'll create a service class that will make an HTTP request for JSON data, and then refactor HTML in the Product Description template to display values from that response.

  3. Challenge

    Using Interfaces to Describe Data

    In this module you'll create interfaces for Album and Track data, and refactor the existing components and service class to use those interface type annotations so that your IDE correctly reports any possible type-related mistakes in your code.

  4. Challenge

    Adding the Tracklisting Component

    In this module you'll refactor existing HTML in the Product Page template over to a new component called Product Tracklisting. Then, you'll use the service class to make an HTTP request for JSON data, and refactor HTML in the Product Tracklisting template to display values from that response.

  5. Challenge

    Displaying a List of Products

    In this module you'll create a new component called Product List to display a list of all albums, and then you'll update the service class to make an HTTP request for JSON data and use the response to display a list of products in the Product List HTML template.

  6. Challenge

    Creating Navigation using the Angular Router

    In this module you'll add some routes using the Angular Router and create a simple navigation between components.

About the author

Jon is an author, developer, and Pluralsight team member via codeschool.com. Lately, he's been working on content and products that help authors create content efficiently. Prior to that, he worked for several years on interactive learning at Code School, and later helped bring that to Pluralsight as Interactive Content.

Real skill practice before real-world application

Hands-on Labs are real environments created by industry experts to help you learn. These environments help you gain knowledge and experience, practice without compromising your system, test without risk, destroy without fear, and let you learn from your mistakes. Hands-on Labs: practice your skills before delivering in the real world.

Learn by doing

Engage hands-on with the tools and technologies you’re learning. You pick the skill, we provide the credentials and environment.

Follow your guide

All labs have detailed instructions and objectives, guiding you through the learning process and ensuring you understand every step.

Turn time into mastery

On average, you retain 75% more of your learning if you take time to practice. Hands-on labs set you up for success to make those skills stick.

Get started with Pluralsight