Featured resource
pluralsight tech forecast
2025 Tech Forecast

Which technologies will dominate in 2025? And what skills do you need to keep up?

Check it out
Hamburger Icon
  • Labs icon Lab
  • Core Tech
Labs

Challenge: Building a Storefront in Angular

This hands-on lab is designed to test your knowledge of Angular concepts such as Routing, Binding, and Styling. Through a series of challenges, you will have the opportunity to demonstrate your understanding and familiarity with these topics. By the end of the lab, you will have demonstrated your proficiency and familiarity with these fundamental Angular concepts.

Labs

Path Info

Level
Clock icon Intermediate
Duration
Clock icon 1h 14m
Published
Clock icon Jun 21, 2023

Contact sales

By filling out this form and clicking submit, you acknowledge our privacy policy.

Table of Contents

  1. Challenge

    Challenge: Introduction

    Welcome to this Angular Challenge

    This challenge will test your knowledge of the topics: Routing, Binding, and Styling.

    In this challenge you have been provided with a set of *.spec.ts files with several unit tests that are still failing. Your job is to make all tests pass.

    Over the next several steps you will be presented with each task as a separate checkbox. After you have coded a solution for the specific task, click on the checkbox to see if your solution meets the requirement.

    If the solution does not meet the requirement, you can expand on both sets of arrows to get some recommendations on possible solutions.

    If you would like to see the current state of the application you can either click the blue Run button in the bottom right corner or manually enter the ng serve command in the Terminal.
    Then open the application in an external browser window:
    {{localhost:4200}}

    You can see the current failing tests by running the command: ng test

    Note:

    • You can focus on individual spec files by adding the include parameter such as: --include src/app/app.routing.spec.ts. Each requirement will provide the path to the related *.spec.ts file.
    • If you have started the ng serve command in the Terminal you can stop the running command using the key combination ctrl+c.

    If you get stuck on any particular step, you can start the next step with a clean code base using the following commands:

    git reset --hard
    git checkout start-step1
    

    When you are ready to begin, click the Next step right arrow below.

  2. Challenge

    Challenge 1: Configure Routing

    This first set of requirements are related to Routing configuration.

    If you are stuck you can checkout a fresh copy of this steps branch start-step1. When you have successfully passed those tests, click the Next step right arrow below.

  3. Challenge

    Challenge 2: Binding

    This next set of requirements will bind the event details to elements in the EventComponent template.

    If you are stuck you can checkout a fresh copy of this steps branch start-step2. When you have successfully passed those tests, click the Next step right arrow below.

  4. Challenge

    Challenge 3: Styling

    This last requirement will apply style to only the EventComponent.

    If you are stuck you can checkout a fresh copy of this steps branch start-step3. When you have successfully passed that test, click the Next step right arrow below.

  5. Challenge

    Congratulations

    Congratulations on Completing this Challenge.

    If you are interested in continuing your Angular learning journey, checkout the Angular Path.

    If you would like to see the final solution you can run the commands:

    git reset --hard
    git checkout final
    

Jeff Hopper is a polyglot solution developer with over 20 years of experience across several business domains. He has enjoyed many of those years focusing on the .Net stack.

What's a lab?

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.

Provided environment for hands-on practice

We will provide the credentials and environment necessary for you to practice right within your browser.

Guided walkthrough

Follow along with the author’s guided walkthrough and build something new in your provided environment!

Did you know?

On average, you retain 75% more of your learning if you get time for practice.