Built-in Directives

Go back to Tutorial

Directives are components without a view. They are components without a template. Or to put it another way, components are directives with a view.

Everything you can do with a directive you can also do with a component. But not everything you can do with a component you can do with a directive.

We typically associate directives to existing elements by use attribute selectors, like so:

<elemenent aDirective></element>

Earlier versions of Angular included over seventy built-in directives. The community contributed many more, and countless private directives have been created for internal applications.

You don’t need many of those directives in Angular. You can often achieve the same results with the more capable and expressive Angular binding system. Why create a directive to handle a click when you can write a simple binding such as this?

src/app/app.component.html

<button (click)=”onSave()”>Save</button>

You still benefit from directives that simplify complex tasks. Angular still ships with built-in directives; just not as many. You’ll write your own directives, just not as many.

We capitalise the name of directives when we are talking about the directive class. For example when we say NgFor we mean the class which defines the NgFor directive. When we are talking about either an instance of a directive or the attribute we use to associate a directive to an element we lowercase the first letter. So ngFor refers to both the instance of a directive and the _attribut_e name used to associate a directive with an element.

Go back to Tutorial