Angular — Components

Basic Component

// header.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent {
  title = 'My App';
}

Component with Inputs

// product.component.ts
@Component({
  selector: 'app-product',
  template: `
    <h2>{{product.name}}</h2>
    <p>{{product.price | currency}}</p>
  `
})
export class ProductComponent {
  @Input() product: any;
}

Component with Outputs

// child.component.ts
@Component({
  selector: 'app-child',
  template: `<button (click)="sendMessage()">Send</button>`
})
export class ChildComponent {
  @Output() messageEvent = new EventEmitter<string>();
  
  sendMessage() {
    this.messageEvent.emit('Hello from child!');
  }
}

Lifecycle Hooks

Hook	Description
ngOnInit	After data-bound inputs
ngOnDestroy	Before destroying
ngAfterViewInit	After view initialized
ngDoCheck	Custom change detection

export class MyComponent implements OnInit, OnDestroy {
  ngOnInit() {
    console.log('Component initialized');
  }
  
  ngOnDestroy() {
    console.log('Component destroyed');
  }
}

Mini Practice

1. Create a component
2. Pass data with @Input
3. Emit events with @Output
4. Use lifecycle hooks

Up Next

Continue with Class Components — component class patterns.