Our site uses cookies. Learn more about their purpose and change of settings in a browser If you are using the site, you give you consent to use cookies, according to current browser settings. Got it

Angular egghead 9 - Directives

  • Language JavaScript
Angular egghead is set of tests which depends on Egghead lessons. This exercise tests your knowledge about directives.

Exercise 9 : Directives


This application requires you to change the element behaviour based on the specific event. You are supposed to write four directives that bind events to two provided canvas.


When you move your mouse over the provided circle (check comments) bootstrap class should be added. It should be handled by enter directive. When you leave the area, it should be removed back (use leave directive to remove the class).

Secondly, when you click the square it should add the provided class to the square (using clickOn directive) and when you double click - it should be removed (using dbClickOn directive).

Please be aware that you should be able to pass the specified bootstrap class as an argument to the directive:

  • index.html should be fixed to achieve the correct behaviour for the circle and square mentioned above (also check comments)

  • btn-danger passed as an attribute to enter and leave directive

  • btn-info passed as an attribute to dbClickOn and clickOn directive

Hint: camelCase directives should be used inside .html files in such a way: camel-case

Before you start, please refer to


To install dependencies

npm install

bower install

To start application in live reload mode

grunt serve


To run jshint:

grunt jshint:default

Run tests

To run unit tests in development mode:

grunt test:dev

To run e2e tests in development mode:

grunt test:e2e

To run jshint, tests and coverage:

npm test

Good luck!

Start this test

I agree to subscription in accordance with the terms of service.
Go to the top and begin