Components Communication Interview Questions

Components communicate through: @Input/@Output decorators, services, ViewChild/ContentChild, event emitters, observables/subjects, NgRx store. Each method suitable for different scenarios based on component relationships.

@Input passes data from parent to child, @Output emits events from child to parent. @Input binds property, @Output uses EventEmitter. Important for parent-child communication. Consider property changes detection.

ViewChild accesses child component/element in template. Provides direct reference to child instance. Used for method calls, property access. Consider lifecycle hooks timing.

Services share data between unrelated components. Use observables/subjects for state management. Implement singleton services for global state. Consider dependency injection scope.

EventEmitter emits custom events from child components. Used with @Output decorator. Supports event data passing, multiple subscribers. Consider unsubscription, memory management.

Sibling communication through shared service, parent component mediation. Use observables/subjects for state sharing. Consider component hierarchy, data flow direction.

ContentChild accesses content projection elements. Used with ng-content directive. Access projected content references. Consider content initialization timing.

Large application communication through state management (NgRx), service layers. Implement proper data flow, component organization. Consider scalability, maintainability.

Subjects are special observables for multicasting. Types: Subject, BehaviorSubject, ReplaySubject. Used in services for state sharing. Consider subscription management.

Parent-to-child method calls through ViewChild reference, @Input properties. Consider component lifecycle, method availability. Important for component interaction.

Content projection (ng-content) passes content from parent to child. Supports single/multiple slots, conditional projection. Important for component reusability.

Event bubbling through host listeners, custom events. Control event propagation, implement handlers. Consider event capture, delegation patterns.

Interaction patterns: mediator, observer, pub/sub patterns. Choose based on component relationships, data flow needs. Consider maintainability, testability.

Dynamic component communication through ComponentFactoryResolver, service injection. Handle component creation, destruction. Consider lifecycle management.

Change detection updates view based on data changes. Affects @Input property updates, event handling. Consider OnPush strategy, performance implications.

Two-way binding through [(ngModel)] or custom implementation. Combine @Input and @Output. Consider change detection, event handling. Important for form controls.

Async pipe handles observables/promises in template. Automatic subscription management, value updates. Important for reactive programming patterns.

State synchronization through services, observables. Implement proper update mechanisms, handle race conditions. Consider state consistency, updates timing.

Lifecycles affect communication timing (ngOnInit, ngOnChanges). Handle initialization, updates, destruction. Consider parent-child timing, change detection.

Error communication through error events, error services. Implement proper error handling, user feedback. Consider error boundaries, recovery strategies.

Interfaces define component communication contracts. Specify input/output properties, methods. Important for type safety, documentation. Consider interface segregation.

Cross-module communication through shared services, state management. Consider module boundaries, service providers. Important for modular applications.

Best practices: proper encapsulation, clear interfaces, unidirectional data flow. Consider component responsibility, communication patterns. Important for maintainability.

Property changes through ngOnChanges lifecycle hook, setter methods. Implement change detection, update logic. Consider simple/complex properties.

Dependency injection provides services, shared instances. Manages component dependencies, service scope. Important for loosely coupled components.

Query parameters through router service, ActivatedRoute. Share state through URL parameters. Consider parameter persistence, navigation handling.

Decorators (@Component, @Input, @Output) configure component behavior. Define metadata, communication interfaces. Important for component definition.

Lazy loading communication through service injection, state management. Handle module loading, component initialization. Consider communication timing.

Anti-patterns: tight coupling, excessive prop drilling, global state abuse. Avoid direct DOM manipulation, complex parent-child chains. Consider code maintainability.