🧩 Component Architecture

Why Components?

A component controls a patch of screen and bundles everything that patch needs: the data (state), the logic (behavior), and the markup and styles that render it. Complex interfaces are just trees of these self-contained pieces.

💡 A useful analogy: Components are like prefabricated sections of a building. Each section — a bathroom pod, a wall panel — is manufactured complete and tested on its own, then assembled into the finished structure. You build a whole app the same way: small, verified components combined into pages.

Anatomy of a Component

Every component has four parts working together: a decorator supplying metadata, a class holding state and behavior, a template for the view, and styles that stay scoped to it.

The decorator

The @Component decorator is metadata that tells Angular how to use the class — its selector, template, styles, and change-detection strategy:

import { Component, ChangeDetectionStrategy } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-product-list',                    // used as <app-product-list>
  standalone: true,
  imports: [CommonModule],                         // template dependencies
  templateUrl: './product-list.component.html',    // or inline `template:`
  styleUrl: './product-list.component.css',        // or inline `styles: [...]`
  changeDetection: ChangeDetectionStrategy.OnPush, // performance strategy
})
export class ProductListComponent { /* ... */ }

The class

The class holds properties (state), methods (behavior), and lifecycle hooks. It uses inject() or the constructor for dependency injection:

import { Component, OnInit, OnDestroy, inject } from '@angular/core';
import { Router } from '@angular/router';
import { Subscription, finalize } from 'rxjs';
import { Product } from './product.model';
import { ProductService } from './product.service';

export class ProductListComponent implements OnInit, OnDestroy {
  products: Product[] = [];
  loading = false;
  error: string | null = null;
  private sub: Subscription | null = null;

  private productService = inject(ProductService);
  private router = inject(Router);

  ngOnInit(): void {
    this.loadProducts();
  }

  ngOnDestroy(): void {
    this.sub?.unsubscribe(); // prevent memory leaks
  }

  loadProducts(): void {
    this.loading = true;
    this.error = null;
    this.sub = this.productService.getProducts()
      .pipe(finalize(() => (this.loading = false)))
      .subscribe({
        next: (products) => (this.products = products),
        error: (err) => (this.error = 'Failed to load: ' + err.message),
      });
  }

  viewDetails(id: number): void {
    this.router.navigate(['/products', id]);
  }
}

The template & styles

The template renders the class's state with Angular's control flow, and the styles stay scoped to this component alone:

<!-- product-list.component.html -->
@if (loading) {
  <p class="spinner">Loading…</p>
} @else if (error) {
  <p class="error">{{ error }} <button (click)="loadProducts()">Retry</button></p>
} @else {
  <div class="grid">
    @for (product of products; track product.id) {
      <article class="card">
        <h3>{{ product.name }}</h3>
        <p>{{ product.price | currency }}</p>
        <button (click)="viewDetails(product.id)">Details</button>
      </article>
    }
  </div>
}

The Lifecycle Hooks

Angular creates, updates, and destroys components on a predictable schedule. Lifecycle hooks are methods Angular calls at each stage so you can run code at exactly the right moment.

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

@Component({ selector: 'app-demo', standalone: true, template: `<p>{{ value }}</p>` })
export class DemoComponent implements OnChanges, OnInit, OnDestroy {
  @Input() value = '';

  ngOnChanges(changes: SimpleChanges): void {
    console.log('input changed', changes['value'].currentValue);
  }

  ngOnInit(): void {
    console.log('safe to fetch data and subscribe here');
  }

  ngOnDestroy(): void {
    console.log('clean up subscriptions and timers here');
  }
}

Component Interaction

Components rarely work alone. The golden rule of Angular data flow: data flows down, events flow up. Parents hand data to children through inputs; children notify parents through events.

Parent → Child: @Input

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

@Component({
  selector: 'app-greeting',
  standalone: true,
  template: `<p>Hello, {{ name }}!</p>`,
})
export class GreetingComponent {
  @Input() name = '';
}

// in the parent template:
// <app-greeting [name]="userName"></app-greeting>

Child → Parent: @Output

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

@Component({
  selector: 'app-child',
  standalone: true,
  template: `<button (click)="notify()">Send to parent</button>`,
})
export class ChildComponent {
  @Output() messageEvent = new EventEmitter<string>();

  notify(): void {
    this.messageEvent.emit('Hello from the child!');
  }
}

// in the parent template:
// <app-child (messageEvent)="receive($event)"></app-child>

Parent accessing a child: @ViewChild

When a parent needs to call a method on a child instance, @ViewChild gives it a reference — available once the view initializes:

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { TimerComponent } from './timer.component';

@Component({
  selector: 'app-parent',
  standalone: true,
  imports: [TimerComponent],
  template: `
    <app-timer></app-timer>
    <button (click)="start()">Start Timer</button>
  `,
})
export class ParentComponent implements AfterViewInit {
  @ViewChild(TimerComponent) timer!: TimerComponent;

  ngAfterViewInit(): void {
    // the child reference is ready here, not in ngOnInit
  }

  start(): void {
    this.timer.start();
  }
}

Content Projection

Content projection lets a component accept markup from its parent and drop it into a slot — Angular's version of "slots." It's how you build flexible wrappers like cards, dialogs, and panels.

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

@Component({
  selector: 'app-card',
  standalone: true,
  template: `
    <div class="card">
      <header><ng-content select="[card-title]"></ng-content></header>
      <div class="body"><ng-content></ng-content></div>
      <footer><ng-content select="[card-actions]"></ng-content></footer>
    </div>
  `,
})
export class CardComponent {}

<!-- using the card in a parent template -->
<app-card>
  <h2 card-title>Product Details</h2>
  <p>This paragraph lands in the default slot.</p>
  <div card-actions>
    <button>Add to Cart</button>
  </div>
</app-card>

The select attribute routes projected content to the right slot. It accepts CSS selectors: [attribute], .class, or element-name. Content without a matching selector falls into the unnamed <ng-content>.

Smart vs Presentational

A widely used pattern splits components into two kinds by responsibility. It keeps logic testable and UI reusable.

Smart component

// product-list.component.ts (smart — fetches, delegates rendering)
@Component({
  selector: 'app-product-list',
  standalone: true,
  imports: [CommonModule, ProductCardComponent],
  template: `
    @for (product of products; track product.id) {
      <app-product-card
        [product]="product"
        (addToCart)="onAddToCart($event)"></app-product-card>
    }
  `,
})
export class ProductListComponent implements OnInit {
  products: Product[] = [];
  private productService = inject(ProductService);
  private cartService = inject(CartService);

  ngOnInit(): void {
    this.productService.getProducts().subscribe(p => (this.products = p));
  }

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

Presentational component

// product-card.component.ts (presentational — pure display)
@Component({
  selector: 'app-product-card',
  standalone: true,
  imports: [CommonModule],
  template: `
    <article class="card">
      <h3>{{ product.name }}</h3>
      <p>{{ product.price | currency }}</p>
      <button (click)="addToCart.emit(product)">Add to Cart</button>
    </article>
  `,
})
export class ProductCardComponent {
  @Input() product!: Product;
  @Output() addToCart = new EventEmitter<Product>();
}

Change Detection & Styles

Two component-level concerns round out the picture: how Angular decides when to update the DOM, and how it keeps your CSS from leaking.

Change detection

By default Angular re-checks every component after any event, timer, or HTTP response. That's predictable but can be wasteful in big apps. The OnPush strategy tells Angular to re-check a component only when one of these happens:

• An @Input reference changes (a new object, not a mutated one)
• An event fires from within the component or its children
• An async-piped Observable emits a new value
• You explicitly call markForCheck()

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

@Component({
  selector: 'app-user-profile',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<h2>{{ user.name }}</h2>`,
})
export class UserProfileComponent {
  @Input() user!: { name: string };
}

Style encapsulation

Angular scopes a component's styles to that component by default, so class names never collide across the app. Three modes exist:

The special :host selector targets the component's own element, useful for setting display or borders on the wrapper itself.

Hands-on Exercise

// user-card.component.ts (presentational)
import { Component, Input, Output, EventEmitter } from '@angular/core';

interface User { id: number; name: string; email: string; }

@Component({
  selector: 'app-user-card',
  standalone: true,
  template: `
    <article class="card" (click)="select.emit(user)">
      <h3>{{ user.name }}</h3>
      <p>{{ user.email }}</p>
    </article>
  `,
})
export class UserCardComponent {
  @Input() user!: User;
  @Output() select = new EventEmitter<User>();
}

// user-list.component.ts (smart)
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UserCardComponent } from './user-card.component';

@Component({
  selector: 'app-user-list',
  standalone: true,
  imports: [CommonModule, UserCardComponent],
  template: `
    @for (user of users; track user.id) {
      <app-user-card [user]="user" (select)="onSelect($event)"></app-user-card>
    }
  `,
})
export class UserListComponent {
  users = [
    { id: 1, name: 'Ada Lovelace', email: 'ada@example.com' },
    { id: 2, name: 'Alan Turing', email: 'alan@example.com' },
  ];

  onSelect(user: { name: string }): void {
    console.log('Selected:', user.name);
  }
}

Summary & Quiz

📚 Further Reading

• angular.dev — Components guide
• Lifecycle hooks reference
• Inputs and Outputs
• Content projection with ng-content

🚀 What's Next?

Components handle the view, but shared logic and data belong elsewhere. Next you'll learn about services and dependency injection — Angular's mechanism for sharing state and behavior across the whole component tree.