🧩 Components & Data Binding

About This Feature

Angular components control a patch of screen called a view. Each component has a TypeScript class (the logic) and an HTML template (the view). They communicate via four binding types:

• Interpolation{{ value }} — renders data as text
• Property binding[property]="expr" — sets element/component properties
• Event binding(event)="handler()" — listens for DOM events
• Two-way binding[(ngModel)]="value" — syncs view ↔ model

Components can accept data from a parent with @Input() and emit events to a parent with @Output() EventEmitter.

Code Example

// greeting-card.component.ts
@Component({
  selector: 'app-greeting-card',
  standalone: true,
  template: `
    <div [style.borderColor]="color">
      <h3>Hello, {{ '{{' }} name {{ '}}' }}!</h3>
      <button (click)="sendGreeting()">Emit Greeting</button>
    </div>
  `
})
export class GreetingCardComponent {
  @Input() name = 'World';
  @Input() color = '#667eea';
  @Output() greet = new EventEmitter<string>();

  sendGreeting() {
    this.greet.emit(`Hello from ${this.name}!`);
  }
}

// Parent template usage:
// Interpolation:       {{ '{{' }} appName {{ '}}' }}
// Property binding:    [color]="cardColor"
// Event binding:       (click)="handleClick()"
// Two-way binding:     [(ngModel)]="twoWayText"
// Component + I/O:     <app-greeting-card [name]="cardName"
//                        (greet)="onGreet($event)" />

Live Demo