Exercise: Handle Events with a Custom Attribute Directive

Let’s practice handing events in directives.

We'll cover the following


Our task is to extend our avatar directive with the following features:

  • The image should be slightly scaled up when the mouse cursor, or pointer, hovers over it.
  • The image scale should be reset when the pointer is removed from the image.
  • An event should be emitted each time the pointer is placed on or removed from an image.
  • A component that uses the directive should receive information when zooming in or out on an image. It should also log image zoom in and image zoom out into the console accordingly.


Please write the code below:

Get hands-on with 1200+ tech skills courses.