Goal: Continue using Angular to to add interactivity and organization into your applications.
- In event bindings, how do target events and template statements work together to create interactivity? What's the difference between the two?
- What is the difference between property binding and event binding?
- What is the difference between one-way and two-way data binding? Walk through example use cases for each.
- How do we know whether a new feature or area of our site requires a new component?
- What does "Data down, actions up" mean, and how does it apply to Angular components?
- What is the difference between an
@Input and an
@Output? What are each used for?
- What does an
EventEmitter do? Where would we use one?
To Do List
Begin each day by following along with the previous night's homework to add new features into our ongoing To Do List application.
Build a small Angular app for a bar (or kombucha store) to track their kegs. Here are some user stories to get you started:
- As a patron, I want to see a list/menu of all available kegs. For each keg, I need to see its
alcoholContent (or perhaps something like
flavor for a kombucha store).
- As an employee, I want to fill out a form when I tap a new keg to add it to the list. (Don't worry about authenticating employee user accounts yet.)
- As an employee, I want the option to edit a keg's properties after entering them just in case I make a mistake.
- As a patron and/or employee, I want to see how many pints are left in a keg. (Hint: A full keg has roughly 124 pints).
- As an employee, I want to be able to click a button next to a keg whenever I sell a pint of it. This should decrease the number of pints left by 1.
- As an employee, I want to be able to see kegs with less than 10 pints left so I can be ready to change them.
- As a patron, I want to have kegs prices to be color-coded for easy readability. Perhaps based on their price (greater or less than $5 per pint, perhaps) or the particular style of beer or kombucha.
- As a patron, I want to use the alcohol content property to display stronger beers differently than weaker beers.
If you're able to complete all user stories above with time to spare, consider going above and beyond and implementing additional features. Here are some potential ideas to get you started:
- As an employee, I want to be able to click a button next to a keg whenever I sell a growler of it. Many growlers are 32 ounces, so this should decrease the number of pints left by 2.
- As an employee, I want to be able to click a button next to a keg whenever I sell a large growler. While most growlers are 32 ounces, some are 64. I'll need to select the appropriate growler size and correctly decrease the remaining number of pints left.
- As a patron, I want to filter the available kegs by
flavor of beer and/or kombucha.
- As an employee, I want to select an option to put a certain keg on sale. This would lower the cost by a percentage of my choosing, and perhaps change a keg's appearance in the list to draw customers' attention to it.
- As an employee, I might want to program a "happy hour" option I can select to put all kegs on sale.
- As an employee, I might want to trigger the "happy hour" option automatically at a certain time of the day or week. (Note that this is advanced and goes beyond the scope of this week's curriculum. Prepare to do your own outside research.)
Peer Code Review
- Application works as expected.
- Application uses a model to organize data.
- Components are used to create display and behavior for your templates.
- TypeScript is used throughout application; including defined data types.
- Users can create and edit instances of a model.
- Models can be filtered using a pipe.
- Edit/update form supports two-way data binding
- Dependencies are managed with npm and Bower.
- Application includes a gulp-based asset pipeline with a development server, and all necessary build tasks.