- Lab
- 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.

Path 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
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.