Angular Input and Output Decorators

@Input() and @Output() are the primary mechanism for communication between parent and child components in Angular.

@Input — Passing Data Down

// child.component.ts
import { Component, Input } from '@angular/core';

@Component({ selector: 'app-product-card', standalone: true, /* ... */ })
export class ProductCardComponent {
  @Input({ required: true }) product!: Product;
  @Input() currency: string = 'USD';

  // Input with transform (Angular 16+)
  @Input({ transform: (v: string) => v.trim() }) title: string = '';
}

<!-- parent template -->
<app-product-card [product]="selectedProduct" currency="EUR" />

@Output — Emitting Events Up

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({ selector: 'app-product-card', standalone: true, /* ... */ })
export class ProductCardComponent {
  @Input({ required: true }) product!: Product;
  @Output() addToCart    = new EventEmitter<Product>();
  @Output() toggleWishlist = new EventEmitter<number>(); // emits product id

  onAddToCart(): void {
    this.addToCart.emit(this.product);
  }
}

<!-- parent template -->
<app-product-card
  [product]="product"
  (addToCart)="handleAddToCart($event)"
  (toggleWishlist)="handleWishlist($event)"
/>

Two-Way Binding with @Input/@Output Pair

@Input()  value: string = '';
@Output() valueChange = new EventEmitter<string>();
// Parent can use [(value)]="myVar"