Exercise Goal

Switch based on the film's episode number (1-6) to output an emoji showing how you feel about the film.

Tasks

1. Open the app.component.html template file.
2. One line 5 (after the title) create a new <div> element. Apply the NgSwitch attribute directive to this element, and switch on the film.episode value.
3. Within the newly created <div> element, create six new <span> elements for each episode.
4. On each <span> element use the NgSwitchCase structural directive to specify the episode number, from 1 to 6.
5. Within each span either use a thumbs-up or a thumbs-down emoji to indicate if you liked the episode. You can also simply use the text "YASSS" or "meh..." within each <span> according to your tastes.

Exercise

Exercise Problem

Notes

• Keep in mind that we're using both the NgSwitch attribute directive along with the NgSwitchCase structural directive in this exercise.
• The NgSwitch attribute directive accepts the value that you are "switching" on. This is similar to the expression that is specified in the switch () statement in JavaScript.
• The NgSwitchCase structural directive accepts an expression upon which we will evaluate against the value specified to the NgSwitch directive.
• In this exercise, we are "switching" on the film.episode property, and we are conditionally rendering a <span> element based on the value of the episode, the integers 1 through 6.