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 plunker:

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

Read any TODO comments in the plunker for hints.

Solution

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


Learn Angular 5 For FREE

I've released my 700 page Kick Starter funded Angular 5 book for FREE