Angular Components: Building Reusable UI

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

@Component({
  selector: 'app-user-card',
  template: `
    <div>
      <h2>{{ user.name }}</h2>
      <p>{{ user.email }}</p>
      <button (click)="onClick()">Click Me</button>
    </div>
  `,
  styles: [`
    div {
      padding: 20px;
      border: 1px solid #ccc;
    }
  `]
})
export class UserCardComponent implements OnInit {
  @Input() user: any;
  @Output() clicked = new EventEmitter<void>();
  
  ngOnInit() {
    console.log('Component initialized');
  }
  
  onClick() {
    this.clicked.emit();
  }
}

import { Component, OnInit, OnDestroy, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-example',
  template: '<div>{{ data }}</div>'
})
export class ExampleComponent implements OnInit, OnChanges, OnDestroy {
  @Input() data: string;
  
  ngOnChanges(changes: SimpleChanges) {
    // Called when input properties change
    if (changes.data) {
      console.log('Data changed:', changes.data.currentValue);
    }
  }
  
  ngOnInit() {
    // Called once after first ngOnChanges
    console.log('Component initialized');
  }
  
  ngOnDestroy() {
    // Called before component is destroyed
    console.log('Component destroying, cleanup here');
  }
}