Component Interaction

In this lesson, you'll learn how components communicate in Angular, especially between parent and child components.

Parent-Child Interaction

Components often need to share data. Parent components can pass data down to child components using input properties.

Using @Input()

Use the @Input() decorator to receive data from a parent component:

@Input() userData: string;

Passing Data to Child

In your parent component template, pass data using property binding:

<app-child [userData]="parentData"></app-child>

Child-to-Parent Communication

Child components communicate upwards using events with the @Output() decorator.

Using @Output()

Create an event emitter to send data from child to parent:

@Output() dataEvent = new EventEmitter<string>();

Emitting Events

Emit events from the child component:

sendData() {
  this.dataEvent.emit('Hello from Child');
}

Listening to Events in Parent

Handle emitted events in the parent component template:

<app-child (dataEvent)="handleEvent($event)"></app-child>

Summary

You now understand how components can interact through inputs and outputs in Angular. Keep practicing!