Guided: Building a Storefront in Angular

In this Angular guided lab, you have been given a demo app called Globoticket. Launching this app will display a storefront containing multiple "bookable" events. Your task in this lab will be to implement an event details component that will display information for each of these events.

The guided steps in this lab will review topics such as using the Angular CLI to generate components, dependency injection, routing, styling, and data binding. Tasks can be validated by clicking on the checkboxes next to them. If you are stuck or would like to compare solutions, a solution directory has been provided for you as well.

The app will not run until you have completed the Using the Angular CLI step. Afterwards, you can launch the app at anytime during the lab by doing the following;

1. Click the Run button at the bottom right of the Terminal.
2. Then view the web page by clicking this link to the Angular website: {{localhost:4200}}
   • You can also view the webpage by clicking the Web Browser tab's Refresh button, once the app is running. It may take a moment for the page to load.

First, you will need to generate a new component for your event details page. This can be trivially done through an Angular command known as ng generate. This command can generate multiple templates of Angular files, but in this lab you will be using it to generate a component with the ng generate component command. You can also use abbreviated commands such as ng g c instead of the aforementioned command. Afterwards, you will need to perform dependency injection with an EventService that has already been created (and imported) as it provides important data and functionality for your component. Once your EventService dependency has been injected, you will need to use it to initialize two properties for your EventDetailComponent class using the getEvents() and createNewEvent() methods provided by the service. You will need to use the this keyword for the instance of your EventService.

So far you've used the Angular CLI to generate a new component and performed dependency injection with an EventService to provide data and functionality to your event-detail component. Now you will need to add routing, which will navigate and send data to your component whenever an event is clicked from the home page.

Within the imports section of the app.module.ts file, you will see two paths already defined in the RouterModule. You will need to define another path for your event-detail component. Remember that routing paths are matched first, so it would be a good idea to put your new path above the other two paths. Now you will need to add routing to the home page so that each event will navigate to your component when clicked. Within the home directory of your src/app should be a home.component.html file. In this file there are multiple a tags with an unspecified href link. You will need to replace each of these hrefs with the [routerLink] directive. Lastly, you will need to add logic within your EventDetailComponent to handle the incoming id parameter and find the corresponding event from your eventList. To do this, you will need to perform dependency injection again with the imported ActivatedRoute and Router. The ActivatedRoute can be used to retrieve the id parameter using its snapshot.paramMap.get('id') call. This id should be used to find a matching event from your eventList(for example, by using the filter() function). The Router can be used to navigate back to the home page with the navigate(['/']) call if an invalid id is given. Like EventService, you will need to use this for all of these calls.

There are many ways to style html and css selectors in Angular. A popular method, and one that Angular bootstraps by default when you generate a component, is the usage of templateUrl and styleUrls. These properties that are defined within your component specify paths to external resources containing the html templates and css stylings to be used by your component. This helps keep your code modular and clean.

When you generated your event-detail component, the components html and css files are initially empty. Running the moveTemplates script from before has given you a baseline template and stylings for your component which you will modify in this step and the next.

If you launch the app and click any event, you should now be able to route to your event-detail component thanks to the routing from the previous step. Don't be surprised that the page is blank, as we still need to implement data binding. For now, you will need to add css stylings to your html template to align the back to home button.

You're in the home stretch, now! If you have launched the app as mentioned in the last step, you will have noticed that your event-detail component displays a blank page beside a back to home and place order button. Even though your component has logic that retrieves a specified event from the parameters sent to it, you have not bound the retrieved data to the html template.

In this final step, you will perform both one-way (using interpolation) and two-way binding for retrieved data, which will then be displayed in your event-detail component.

Navigate back to the event-detail.component.html file. Near the start you will notice a bunch of fairly self-explanatory comments starting with Add imageUrl and ending with Show event price. All of these are in fact properties of the selectedEvent retrieved in your component. If you want to see the properties in depth, you can check the event/eventInfo.ts file to see the interface for EventInfo. Now there should only be two pieces of data left to bind as denoted by the comments. The first one will require two-way binding, which is done by using the [(ngModel)] directive. By binding the numTickets property of your selectedEvent to the select element, changing the number of tickets in the dropdown menu will change the value of the numTickets property. Then you can use interpolation to display the total order price as the product of numTickets with the price, which will dynamically change depending on the number of tickets selected. All done! Now by launching your app and clicking each event you should be redirected to your event-detail component which should display all the necessary event information.