Directives & Pipes Interview Questions

Directives are classes that modify elements. Types: Component directives (with template), Structural directives (modify DOM structure like *ngIf), Attribute directives (modify element behavior like [ngStyle]). Core building blocks of Angular.

Create using @Directive decorator. Implement logic in class methods. Use ElementRef/Renderer2 for DOM manipulation. Can have inputs/outputs, host listeners. Consider selector naming, encapsulation.

Structural directives modify DOM structure. Examples: *ngIf, *ngFor, *ngSwitch. Use microsyntax with asterisk (*). Create template views, handle context. Important for dynamic content.

Pure pipes execute only on pure changes (primitive/reference). Impure pipes execute on every change detection. Pure pipes better for performance. Impure needed for dynamic transformations.

Create using @Pipe decorator. Implement PipeTransform interface. Define transform method for conversion logic. Can accept multiple arguments. Consider pure/impure setting.

Attribute directives change element appearance/behavior. Examples: ngStyle, ngClass. Can respond to user events, modify element properties. Used for dynamic styling, behavior modification.

Events handled through @HostListener decorator. Respond to DOM events, custom events. Can access event data, element properties. Consider event propagation, prevention.

Built-in pipes: DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, DecimalPipe, PercentPipe, AsyncPipe, JsonPipe. Each serves specific transformation need. Consider localization support.

Directive composition through multiple directives on element. Handle directive interaction, priority. Consider order of execution, conflicts. Important for complex behaviors.

AsyncPipe unwraps observable/promise values. Automatically handles subscription/unsubscription. Updates view on new values. Important for reactive programming, memory management.

Custom structural directives use TemplateRef, ViewContainerRef. Create/destroy views programmatically. Handle context binding, view manipulation. Consider microsyntax support.

Directive lifecycles: ngOnInit, ngOnDestroy, ngOnChanges, etc. Handle initialization, changes, cleanup. Consider timing, dependency availability. Important for proper resource management.

Pipe parameters passed after colon in template. Multiple parameters separated by colons. Access in transform method. Consider optional parameters, default values.

Host bindings modify host element properties/attributes. Use @HostBinding decorator. Bind to element properties, classes, styles. Consider property naming, updates.

Pipe chaining connects multiple pipes sequentially. Order matters for transformation. Consider data type compatibility, performance. Use for complex transformations.

Exported directives available for template reference. Use exportAs property. Access directive methods/properties in template. Important for directive interaction.

Directive dependencies injected through constructor. Access services, other directives. Consider dependency scope, availability. Important for directive functionality.

Best practices: pure by default, handle null/undefined, proper error handling. Consider performance impact, reusability. Document parameters, behavior.

Testing through TestBed configuration, component creation. Test directive behavior, pipe transformations. Consider different scenarios, edge cases. Important for reliability.

Template context provides data to template. Access through let syntax. Define custom context properties. Important for dynamic content, loops.

Dynamic pipes selected at runtime. Use pipe binding syntax. Consider pipe availability, performance. Important for flexible transformations.

Directive queries access other directives. Use ContentChild/ContentChildren, ViewChild/ViewChildren. Access child directives, elements. Consider timing, availability.

Pipe errors handled through error handling, default values. Consider null checks, type validation. Provide meaningful error messages. Important for robust applications.

Selector patterns: element, attribute, class selectors. Define directive application scope. Consider naming conventions, specificity. Important for proper directive usage.

i18n in pipes through locale services, formatting options. Support different formats, languages. Consider cultural differences, formats. Important for global applications.

Common patterns: decorator pattern, adapter pattern, composite pattern. Apply based on use case. Consider reusability, maintainability. Important for scalable applications.

Optimization through proper change detection, minimal DOM manipulation. Use OnPush strategy when possible. Consider event binding, updates frequency. Important for application performance.

Communication through inputs/outputs, services, events. Handle parent-child interaction, sibling communication. Consider component hierarchy, data flow. Important for complex directives.

Conflicts resolved through priority, specific selectors. Handle multiple directives, compatibility. Consider directive composition, interaction. Important for complex applications.