A directive changes an HTML element to which it is applied. Built-in directives handle common jobs such as repeating product cards, selecting content, and changing classes or styles. Custom directives add application-specific behavior when a binding alone is not enough. section 5.5.1 section 11.2.1 section 14.3
Choose a directive by the change you need:
- Use ngIf to include content conditionally, ngSwitch to choose among alternatives, ngFor to repeat content for a sequence, or ngTemplateOutlet to repeat a template. The asterisk marks a micro-template directive. section 12.2 section 12.4
- Use ngClass or ngStyle to change a host element’s classes or styles. Angular checks whether a binding target matches a directive before treating it as an ordinary property binding. section 11.2.1 section 11.2
- Create an attribute directive when one element needs reusable behavior or presentation that built-in directives do not provide. Apply @Directive to a class and give it a selector; avoid custom code when a simpler binding suffices. section 14.0 section 14.3
Configure an attribute directive
A table-cell directive can match elements carrying the pa-attr attribute. A second attribute, pa-attr-class, supplies a class name for each cell; @Attribute reads it in the constructor, and classList.add applies it. A fallback class handles an omitted or empty value. This lets category and price cells use different classes without separate directive classes. section 14.3.1
Listing 14.7. Reading an attribute in the attr.directive.ts file in the src/app folder
import { Directive, ElementRef, Attribute } from "@angular/core";
@Directive({
selector: "[pa-attr]",
})
export class PaAttrDirective {
constructor(element: ElementRef,
@Attribute("pa-attr-class") bgClass: string) {
element.nativeElement.classList
.add(bgClass || "table-success", "fw-bold");
}
}
Inspect the directive class, selector, @Attribute constructor parameter, and fallback class in one listing. section 14.3.1
A directive can also expose functionality to its template: exportAs gives a template variable access to its properties and methods. For forms, a custom validation directive implements Validator and registers itself with NG_VALIDATORS; without that provider registration, Angular will not use it for validation. To test a directive’s interaction with its host, apply it in a test component rather than testing only its class in isolation. section 14.7 section 22.3.1 section 29.0
