Defining Angular directives

Now that we've built a simple Angular component, let's continue our journey by understanding the Angular directives.

Using Angular directives, we can apply different behavioral or structural changes over the DOM. In this example, we will build a simple tooltip directive.

In contrast to components, directives do not have views and templates. Another core difference between these two concepts is that the given HTML element may have only a single component but multiple directives on it. In other words, directives augment the elements compared to components that are the actual elements in our views.

Angular's official style guide's recommendation is to use directives as attributes, prefixed with a namespace. Keeping this in mind, we will use the tooltip directive in the following way:

<div saTooltip="Hello world!"></div> 

In the preceding snippet, we use the tooltip directive over the div element. As a namespace, its selector uses the sa string.

Note

Since...