Angular attribute directives add reusable behavior or appearance to an existing element; they do not supply their own template. Use a regular template binding for a one-off class, style, property, or event change, and create a directive when the behavior should be packaged for use on multiple hosts.
What are attribute directives in Angular?
Angular describes attribute directives as changing “the appearance or behavior of DOM elements and Angular components.” They are applied to an existing host, such as a paragraph or component, rather than creating a view of their own. A directive instance is associated with each matching host element.
As an Amazon Associate I earn from qualifying purchases.
A custom attribute directive is a class marked with @Directive(). Its selector identifies which elements receive it. Attribute selectors are commonly prefixed to distinguish them from native HTML attributes; for example, [appHighlight] matches an element carrying the appHighlight attribute.
When should you use a directive instead of a binding or component?
| Need | Choose | Why |
|---|---|---|
| A change on one element, such as a class, style, property, or event response | Template binding | It keeps a simple, local change in the template without introducing a reusable abstraction. |
| Behavior or appearance that should be packaged and reused on different host elements | Attribute directive | The directive encapsulates behavior that can be applied wherever its selector matches. |
| A UI element that needs its own template | Component | A component provides a view; an attribute directive augments an existing host. |
For simple class and style changes, Angular’s style guide prefers direct class and style bindings over NgClass and NgStyle. The guide cites simpler syntax and additional performance cost from those directives, without publishing a quantified benchmark. Angular Style Guide.
#1 Best Overall
How do you create an attribute directive in Angular?
-
Generate a directive with the Angular CLI:
ng generate directive highlight. -
Define its selector with
@Directive(). A minimal form is@Directive({ selector: '[appHighlight]' }). Current Angular documentation says directives are standalone by default. -
Apply the attribute to an existing host, for example
<p appHighlight>Highlight me</p>. Angular matches the selector and associates the directive instance with that paragraph.What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy. -
Add behavior to the directive class, then use the directive anywhere its selector is available. For input-driven behavior, declare an input and bind a value at the host.
See Angular’s attribute-directive guide for the documented scaffold and examples.
How do inputs and host events work?
A directive can accept a value from its host element and respond to host events. Angular’s current guide demonstrates the input() API and a host metadata object for mapping host events to handlers. For example, a color input can be bound as [appHighlight]="color"; event handlers can then use the directive’s input to implement the reusable behavior.
Prefer the host metadata property for host event and property bindings. Angular’s HostBinding API documentation describes host bindings and points to host as the preferred approach: HostBinding API.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →When are NgClass and NgStyle useful?
Direct bindings are a clear choice for straightforward class or style values. NgClass and NgStyle remain useful when a template needs to work with a collection of classes or computed styles, or when an established code pattern already uses them.
NgStyle accepts colon-separated style key/value entries and supports unit suffixes such as .px. It applies non-null values and removes the corresponding style when a value is null. Its API documentation also notes that simple cases can use direct style binding without importing the directive: NgStyle API.
Should a directive use ElementRef to change the DOM?
Angular’s guide includes an example that accesses the host through ElementRef.nativeElement and changes a style. Treat that as a documented technique for the example, not as a general guarantee that unrestricted direct DOM manipulation is safe in every context. For simple presentation changes, template bindings are usually the more direct option; use a custom directive when the behavior is reusable and belongs with the host.
Further learning
Packt’s 2025 publisher listing for Learning Angular: A Practical Guide to Building Web Applications with Modern Angular includes a chapter on enriching applications with pipes and directives. It is a broad Angular book, not a directive-only manual. The publisher notes an earlier marketed edition was updated for Angular 15, so confirm the exact edition before relying on printed examples for current APIs. Packt book listing.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
