Challenge: Building a Storefront in Angular

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.

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.

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.

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.

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