1. Angular
  2. Custom Directives
  3. Activity

Practice Activity

Create a custom rollover image directive which shows one image normally and another when the user hovers over it.

activity example

The directive will be used like so:

<img [ccRollover]="{
  'initial':'https://unsplash.it/200/300?image=201',
  'over':'https://unsplash.it/200/300?image=202'
}"/>

Steps

Fork this blitz:

https://stackblitz.com/github/codecraft-tv/angular-course/tree/current/6.custom-directives/7.activity/code/@activity

Flesh out the RolloverImageDirective class to implement the functionality you need.

Read any TODO comments in the blitz for hints.

Solution

When you are ready compare your answer to the solution in this blitz:

https://stackblitz.com/github/codecraft-tv/angular-course/tree/current/6.custom-directives/7.activity/code/@solution

Caught a mistake or want to contribute to the book? Edit this page on GitHub!