Exercise Goal

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


  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 Problem


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

I finished! On to the next chapter