Directives are classes that add behavior to elements in the DOM and come in three flavors. Component directives are directives with a template, which is what components themselves are. Structural directives change the DOM layout; the most common are *ngIf, which conditionally includes or removes an element from the DOM based on a boolean expression, and *ngFor, which repeats a template for each item in a collection, ideally using trackBy to improve performance by helping Angular identify which items changed. Attribute directives change the appearance or behavior of an element, with ngClass and ngStyle being built-in examples. Custom attribute directives are created by decorating a class with @Directive({ selector: '[appHighlight]' }) and can use @HostListener to react to host element events and inject ElementRef to access the underlying DOM node. The :host selector in component CSS targets the host element itself, while :host-context() allows styling based on ancestor states.
Pipes are functions that transform data in templates and are used with the pipe operator. Angular ships with built-in pipes like DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, DecimalPipe, JsonPipe, and AsyncPipe. The AsyncPipe is especially important because it automatically subscribes to an Observable or Promise, returns the emitted value, and automatically unsubscribes when the component is destroyed to prevent memory leaks, while also triggering change detection on new emissions. Custom pipes are created by implementing the PipeTransform interface on a class decorated with @Pipe({ name: 'truncate' }), with the transform method defining how the input value is converted to output.
Understanding the difference between ng-container, ng-template, and ng-content is essential. ng-container is a non-rendering host used to group elements when applying multiple structural directives. ng-template defines inert content that is not rendered until explicitly instantiated, for example through ViewContainerRef.createEmbeddedView or as the else branch of *ngIf. ng-content enables content projection, allowing a parent to insert content into a child component's template, with multi-slot projection using the select attribute to route content to specific locations. ngTemplateOutlet renders an ng-template by reference and accepts a context object, while ngProjectAs re-maps projected content to a specific selector when wrapping it in a structural directive. ViewEncapsulation controls whether component styles leak out, with Emulated as the default that adds attribute selectors, None for global styles, and ShadowDom for native shadow DOM. Renderer2 abstracts DOM operations and is preferred over direct ElementRef manipulation because it supports server-side rendering and security.