Q1. How do parent and child components communicate in Angular?
Parent to child: use @Input decorator to pass data.
Child to parent: use @Output with EventEmitter to emit events.
Example: parent binds to child''s input property and listens to child''s output events.
This is the primary method of component communication.
Child to parent: use @Output with EventEmitter to emit events.
Example: parent binds to child''s input property and listens to child''s output events.
This is the primary method of component communication.
Q2. What is @Input in Angular?
@Input decorator makes a component property bindable from a parent component.
The parent uses property binding to pass data.
Example child:
The parent uses property binding to pass data.
Example child:
@Input() userName: string;
Q3. What is @Output and EventEmitter?
@Output decorator defines an event that the child component can emit to the parent.
It''s used with an EventEmitter.
Example child:
It''s used with an EventEmitter.
Example child:
@Output() userSelected = new EventEmitter();
selectUser(user: User) { this.userSelected.emit(user); }
Q4. How do sibling components communicate?
Sibling communication can be done via a shared service.
A service with a Subject or BehaviorStream allows components to subscribe and emit events.
Alternatively, you can use a parent component as a mediator, passing data through @Input and @Output between siblings via the parent.
A service with a Subject or BehaviorStream allows components to subscribe and emit events.
Alternatively, you can use a parent component as a mediator, passing data through @Input and @Output between siblings via the parent.
Q5. What is the role of @ViewChild?
@ViewChild gives a parent component access to a child component''s instance or a DOM element.
It can be used to call child component methods or access properties directly.
Example:
It can be used to call child component methods or access properties directly.
Example:
@ViewChild(ChildComponent) child: ChildComponent;
ngAfterViewInit() { this.child.someMethod(); }