Overview

By this point you should be able to create your own custom component as well as use a set of built-in Angular directives.

Now it’s time to learn how to build your own custom directives.

But you might be surprised to hear that you’ve already created a custom directive. That’s because Components are Directives.

Components have all the features of Directives but also have a view, that is to say they have a template and some HTML that is injected into the DOM when we use it.

Another difference is that a single HTML element can only have a single component associated with it. However a single element can have multiple directives associated with it.

Let’s continue with our joke example app and create a directive which shows the punchline of the joke when the user hovers over the card.

In this section you will learn:

How to create custom directives using the @Directive decorator.
How directives can both listen to events and change properties of the host element they are associated with.
How we can configure a directive so that it can take inputs when it’s defined on an element, like [aDirective]={config:'value'}

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

Advanced JavaScript

This unique course teaches you advanced JavaScript knowledge through a series of interview questions. Bring your JavaScript to the 2021's today.

Level up your JavaScript now!

[🌲,🌳,🌴].push(🌲)

If you find my courses useful, please consider planting a tree on my behalf to combat climate change. Just $4.50 will pay for 25 trees to be planted in my name. Plant a tree!