Component Communication in Angular
From the Angular cheat sheet · Components · verified Jul 2026
Component Communication
Input, Output, and component interaction
typescript
// Parent to child - @Input
@Component({
selector: 'app-child',
template: '<p>{{ message }}</p>'
})
export class ChildComponent {
@Input() message: string;
@Input() user: User;
}
// Child to parent - @Output
@Component({
selector: 'app-child',
template: '<button (click)="send()">Send</button>'
})
export class ChildComponent {
@Output() messageEvent = new EventEmitter<string>();
send() {
this.messageEvent.emit('Hello Parent');
}
}💡 Use @Input for data flow down, @Output for events up
⚡ ViewChild is resolved after ngAfterViewInit
📌 Two-way binding uses pattern: [(prop)]="value"
🔥 Content projection allows flexible component composition