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 20 - angular.element

  • Language JavaScript
Write a directive which, depending on the entered values will change the class specified in directive input.

Exercise 20 : angular.element


You start with a basic application that displays one input field. The application should display a circle or square based on the input values.


Complete the findElement directive:

  • it should be restricted as an element.
  • create a new h4 DOM element
  • the new element should be appended and compiled as the directive template
  • the directive should react to any changes to the input.
    • when the input value is set to: circle or square, element class should be changed respectively to a circle or square.
    • in other cases, it should display a red message `You did not enter *circle or square`* (using text-danger class).

To add class to the element use addClass('className') function, to remove it use removeClass('className') and to add the text use text(''someText').

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