What is @Input() and @Output() in Angular?

@Input() and @Output() are decorators that define component communication: how data flows between parent and child components. @Input() — parent to child: marks a component property as an input that can be set by a parent component via property binding. Child component: @Input() title: string = ""; @Input("productId") id: number = 0; // alias. Parent template: <app-card [title]="post.title" [productId]="selectedId">. The value passed from parent flows down to the child's property. @Output() — child to parent: marks a component property as an output that emits events to the parent via EventEmitter. Child component: @Output() itemSelected = new EventEmitter<Product>(); selectItem(product: Product) { this.itemSelected.emit(product); }. Parent template: <app-product-list (itemSelected)="onProductSelected($event)">. $event: in the parent template, $event refers to the emitted value. Two-way binding with @Input + @Output: combine a property input and an event output with Change suffix: @Input() value = ""; @Output() valueChange = new EventEmitter<string>(); — allows parent to use [(value)]="parentProp" (banana-in-a-box syntax). Required inputs (Angular 16+): @Input({ required: true }) label!: string; — compile-time error if parent doesn't provide the value. Input transforms (Angular 16+): @Input({ transform: coerceBooleanProperty }) disabled = false;