What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Angular attribute directives add reusable behavior or appearance to an existing element; they do not supply a template of their own. Use ordinary template bindings for a one-off change, and create a directive when the same 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. A directive is attached to a host element, where it can respond to inputs or events and affect that host. A component is the better fit when the UI needs its own template.
For a single element, a class, style, property, attribute, or event binding is often enough. A directive becomes useful when you want to reuse behavior across different elements or keep that behavior out of repeated template code. See Angular’s attribute directives guide and directives overview.
When should you use a directive instead of a binding?
| Need | Good fit |
|---|---|
| Change a class, style, property, attribute, or handle an event once | Use a template binding on the element. |
| Package behavior for reuse on multiple existing elements | Use a custom attribute directive. |
| Render a UI with its own template | Use a component. |
| Apply a computed collection of classes or styles | Consider NgClass or NgStyle; for simple class or style changes, prefer direct bindings. |
Angular’s style guide prefers class and style bindings over NgClass and NgStyle for simpler syntax and lower directive overhead. This is qualitative guidance, not a quantified performance claim.
#1 Best Overall
How do you create an attribute directive?
Use Angular CLI to scaffold a directive, or define a class with @Directive(). The selector determines which elements receive an instance of the directive.
- Generate a directive with
ng generate directive highlight. - Set its selector to an attribute selector, such as
[appHighlight]. - Apply it to a host element with markup such as
<p appHighlight>Highlight me</p>.
Angular directives are standalone by default. For a custom selector and matching element, Angular attaches a directive instance to that host. The official guide also documents using ElementRef and its nativeElement to access a host and change a style. Treat direct DOM access deliberately; that example is not a general guarantee that unrestricted DOM manipulation is safe.
How do directive inputs and host events work?
A directive can accept a value from the template and listen for events on its host. Angular’s current guide demonstrates the input() API for an input, and the host metadata property for host event and property bindings.
import { Directive, input } from '@angular/core';
@Directive({
selector: '[appHighlight]',
host: {
'(mouseenter)': 'onMouseEnter()',
'(mouseleave)': 'onMouseLeave()',
},
})
export class HighlightDirective {
appHighlight = input('yellow');
onMouseEnter() {
// Apply the chosen highlight behavior here.
}
onMouseLeave() {
// Undo the highlight behavior here.
}
}Use it by binding a value to the directive’s input, for example <p [appHighlight]="color">Highlight me</p>. The example leaves the visual change as an implementation decision; the key pattern is that the directive receives the value and handles host events. Angular’s HostBinding API documents host bindings and notes that the host metadata property is preferred over @HostBinding.
Rank #3
When are NgClass and NgStyle useful?
For one simple class or style, direct template bindings keep the choice explicit and avoid importing a directive just for that change. NgClass and NgStyle remain useful when a view needs to apply a computed collection of classes or styles, or when an established code pattern already uses them.
NgStyle accepts style key/value entries, including a unit suffix such as .px. A non-null value assigns the style; a null value removes the corresponding style. Its API reference describes these behaviors. A simple direct style binding does not require NgStyle.
What if Angular should not interpret the directive attribute?
Angular’s attribute-directive guide also covers ngNonBindable, which prevents Angular from compiling bindings in a section of a template. Consult the guide when you need that behavior rather than a custom directive.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchPC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Quick 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.
