Directives & Pipes

Apply the currency, date and number pipes with |, e.g. amount | currency:'EUR', issuedOn | date:'longDate', qty | number:'1.0-0'. Arguments follow colons in order, and chained pipes run left to right.

Decorate a class with @Pipe({ name: 'truncate' }), implement PipeTransform's transform(value, ...args), and add the class to the standalone component's imports. Extra transform parameters become colon-separated arguments, as in text | truncate: 40.

<ng-template> declares a fragment that Angular compiles but renders only when an outlet or code stamps it; <ng-container> renders its children immediately without adding a wrapper element. Neither becomes an HTML element itself; each is represented by a comment node.

The Angular compiler wraps the element in an ng-template that carries only the structural directive and its microsyntax bindings; the directive then renders that template, or not, through TemplateRef and ViewContainerRef.

In Angular, prefer host bindings over both. Use ElementRef.nativeElement for focus, measuring or observers, inside render callbacks. Use Renderer2 when created elements need component style encapsulation or animation hooks; otherwise it is equivalent to native DOM APIs.

A pure pipe (the default) re-runs only when its value or an argument changes by Object.is, so pushing into the same array is invisible. An impure pipe (pure: false) runs on every check of its view.

Both bind properties, attributes, classes, styles and events on a directive's own element; the host object declares them in @Component or @Directive metadata, the decorators on class members. Angular's docs recommend the host object and keep the decorators only for backwards compatibility.

Bind an object to ngTemplateOutletContext (or write context: in the * form); the template reads its keys with let-name="key". $implicit is the default key: a let- declaration with no value receives it.

Inject TemplateRef and ViewContainerRef, read a role input named after the selector, and call createEmbeddedView when the role is held or clear when it is not, guarding so the view is never created twice.

Angular creates an instance of that directive on the component's host element whenever the component is used, and its host bindings and listeners apply there. Its inputs and outputs are not part of the component's API unless listed in the entry.

Use template-style keys in the host object: '[class.name]' toggles a class, '[attr.name]' sets or removes an attribute (ARIA names also work without attr. since v20.2), '[style.prop.unit]' sets a style, and a plain key sets a static attribute.

Each asterisk expands into an ng-template around the element, and one element can only have one such wrapper, so the compiler rejects a second starred directive; nest them, putting the outer one on an ng-container.

Angular's style guide prefers [class] and [style] bindings: no import and less overhead. NgClass still wins when an object key holds several space-separated classes or when the bound object is mutated in place, because [class] compares objects with ===.

Angular matches directive selectors at compile time against each element's tag, static attributes, classes and binding names. An input with the same name as the attribute selector means [appHighlight]="color" satisfies the selector and sets that input in one step.

KeyValuePipe sorts entries by key by default, strings by code unit and numbers numerically. Pass a compare function as its argument to change that, or null (since v19) to keep the input's natural order.

It parses as discounted ? net : (gross | currency), so only gross is formatted. The pipe binds more loosely than +, &&, || and ?? but more tightly than the ternary, so wrap the conditional in parentheses.

Host directives run before the component or directive that declares them in every phase: they are constructed first, receive inputs and ngOnInit first, and apply host bindings first. The host therefore applies its host bindings last and can override theirs.

Use the object form of a hostDirectives entry and list names in inputs and outputs, writing 'text: hint' to expose Tooltip's text as hint. A required host directive input must be exposed, and names must exist and not clash with another binding.

A method call in a binding runs every time the view is checked, because Angular cannot know its dependencies. A pure pipe runs only when its value or arguments change, reusing its previous result otherwise.

Declare '(document:click)': 'onClick($event)' in the directive's host object, inject ElementRef, and emit an output when the host element does not contain event.target. Angular removes the document listener when the directive is destroyed, so no manual cleanup is needed.

A naked first expression binds to the input named after the selector; other keys get the selector prefix and a capital letter, so of becomes ngForOf; let x reads $implicit, and as or let x = y read named context properties.

Renderer2.listen on document registers a listener that outlives each directive, and its closure keeps the destroyed directive and its host element reachable. Keep the returned unlisten function and call it from DestroyRef.onDestroy, or use a declarative document listener that Angular removes for you.

An instant such as UTC midnight is formatted in each user's local zone by default, so western users see the previous day. Send a date-only string, or pass a zone argument or DATE_PIPE_DEFAULT_OPTIONS timezone such as 'UTC'.

Compose with hostDirectives to attach several independent behaviours, each with its own instance, state and opt-in API; inherit when a component is a specialised version of one base and should share its whole API.

The pure pipe reads Date.now() internally, but its only input never changes, so transform never re-runs. Pass a shared now signal as an argument, updated by one timer, so the pure pipe re-runs when time moves.

Each instance registers its own document listener, so one click runs 500 handlers, each marking its view and ancestors dirty and scheduling change detection. Mount the directive only on the open menu, or share one listener.

Accept a TemplateRef (input or content query) and render it per row with NgTemplateOutlet, passing the row as $implicit. The template still evaluates against, and by default injects from, the consumer that declared it.

Both are static members read only by Angular's template type checker: ngTemplateContextGuard is a type predicate that gives the template's let variables a real context type, and ngTemplateGuard_<input> narrows the bound expression inside the template.

Declaring exportAs on an Angular directive gives it a name that templates can use as #x="name" to get the directive instance and call its public members; without exportAs a template cannot reference the directive at all.