- Lab
-
Libraries: If you want this lab, consider one of these libraries.
- Core Tech

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.

Lab Info
Table of Contents
-
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 combinationctrl+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.
- You can focus on individual spec files by adding the include parameter such as:
-
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. -
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. -
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. -
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
About the author
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.