An attribute directive in Angular
Angular interview exercise on Pipes & directives, difficulty 2 of 3. Solve it in the editor beside a worked example, or cold in Interview mode with the example hidden; the tests run the moment you do.
Write HighlightDirective, selector [appHighlight]: the attribute's value is the colour (an input aliased to the selector); a bare appHighlight with no value means "yellow". On mouseenter it sets the host's background style to that colour; on mouseleave it clears it. NoteComponent uses it on <p class="note" appHighlight="pink"> and on <p class="plain" appHighlight>.
Each exercise pairs a worked example with a twin problem to solve in a real editor; the tests run the moment you do. Interview mode hides the example: solve it from memory, without the hint or the solution, and it counts as solved cold. Progress is saved in your browser, and in your account if you sign in.