Part 2 — Structuring User Interfaces with Components

Angular applications are built from components — small, isolated units responsible for rendering part of the UI and handling its logic. Each component controls a section of the screen, can receive data, can output events, and participates in a hierarchical tree of parent and child components.

In this chapter you will learn:

How to create components

How to connect a component to its HTML template and CSS

How to display dynamic data

How to control what is shown using Angular’s modern control-flow syntax

How components communicate with each other

How to style and encapsulate component-specific CSS

How to work with component lifecycle hooks

How Angular handles change detection

You will also see short notes explaining how older Angular versions handled these tasks, so you understand both modern best practice and past conventions.

1. Anatomy of an Angular Component

A component consists of:

A TypeScript class (UI logic)

A template (.html)

A style sheet (.css)

Example:

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
  imports: [RouterOutlet]
})
export class AppComponent {
  title = 'World';
}

Key metadata properties

Property	Purpose
`selector `	Tag name used in templates
`templateUrl` / `<span class="editor-theme-code">template</span>`	Defines the UI
`styleUrl` / `<span class="editor-theme-code">styles</span>`	Defines component CSS
`imports `	Standalone components this one depends on

Modern Angular (v16+) note

Standalone components are now the standard.
They use the imports array instead of NgModules.

Legacy note

Older projects used NgModules and did not include the imports array in the @Component decorator.

3. Creating a Component with the CLI

Inside your Angular project folder:

ng generate component product-list

This generates:

product-list/
  product-list.component.ts
  product-list.component.html
  product-list.component.css
  product-list.component.spec.ts

To use your new component, import it into another component:

import { ProductListComponent } from './product-list/product-list.component';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet, ProductListComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {}

And place its selector in the HTML:

<app-product-list />

4. Displaying Data in the Template

Angular templates support multiple ways to bring component data into the UI.

4.1 Interpolation

<h1>Hello, {{ title }}</h1>

4.2 Property Binding

<h1 [innerText]="title"></h1>

Important

Property binding targets DOM properties, not HTML attributes.

5. Angular’s Modern Control Flow Syntax (@if, @for, @switch)

Angular 17 introduced a new built-in control-flow syntax that is:

More readable

Faster

Closer to JavaScript

Smaller bundle size compared to directive-based templates

5.1 @if (conditional rendering)

@if (products.length > 0) {
  <h1>Products ({{ products.length }})</h1>
} @else {
  <p>No products found!</p>
}

Legacy note (pre-Angular 17)

*ngIf was used:

<h1 *ngIf="products.length > 0">Products</h1>

5.2 @for (looping)

<ul>
  @for (product of products; track product.id) {
    <li>{{ product.title }}</li>
  } @empty {
    <p>No products found</p>
  }
</ul>

Why `track` is important

It helps Angular identify which DOM element corresponds to which data item, improving rendering performance.

Legacy note

Older Angular templates used *ngFor:

<li *ngFor="let product of products">{{ product.title }}</li>

5.3 @switch

@switch (product.title) {
  @case ('Keyboard') { 🎹 }
  @case ('Microphone') { 🎤 }
  @default { 📦 }
}

Legacy note

Previously:

<div [ngSwitch]="product.title">
  <p *ngSwitchCase="'Keyboard'"></p>
  <p *ngSwitchDefault></p>
</div>

6. Adding Interactivity: Events and User Input

To react to user actions, Angular uses event binding.

<li (click)="selectedProduct = product">{{ product.title }}</li>

(click) — target event

The right-hand expression — TypeScript code executed when clicked

All browser events are supported.

7. Styling Components

7.1 Class Binding

<p [class.selected]="isSelected"></p>

You can pass an entire object with boolean conditions:

currentClasses = {
  selected: true,
  highlighted: false
};

<p [class]="currentClasses"></p>

7.2 Style Binding

<p [style.color]="'red'"></p>
<p [style.width.px]="120"></p>

Object syntax:

currentStyles = {
  color: 'red',
  width: '100px'
};

<p [style]="currentStyles"></p>

7.3 View Encapsulation

Angular normally isolates component CSS:

encapsulation: ViewEncapsulation.Emulated // default

Other modes:

Mode	Description
`Emulated `	Scoped CSS (default)
`None `	CSS leaks globally
`ShadowDom `	Uses browser’s native Shadow DOM

Example turning isolation off:

encapsulation: ViewEncapsulation.None

Use this carefully.

8. Component Communication

Components interact via:

Inputs (data goes down into a child)

Outputs (events go up from a child to a parent)

8.1 Passing Data Down (Input Binding)

Child component:

import { Component, input } from '@angular/core';
import { Product } from '../product';

@Component({
  selector: 'app-product-detail',
  templateUrl: './product-detail.component.html'
})
export class ProductDetailComponent {
  product = input<Product>();
}

Parent template:

<app-product-detail [product]="selectedProduct" />

Required inputs

product = input.required<Product>();

8.2 Sending Events Up (Output Binding)

Child:

import { output } from '@angular/core';

added = output<Product>();

addToCart() {
  this.added.emit(this.product()!);
}

Parent:

<app-product-detail
  [product]="selectedProduct"
  (added)="onAdded($event)"
/>

Parent TS:

onAdded(product: Product) {
  alert(`${product.title} added to cart!`);
}

Legacy note

In older Angular:

@Input() product!: Product;
@Output() added = new EventEmitter<Product>();

9. Template Reference Variables

Used to access a component or element instance:

<app-product-detail #detail [product]="selectedProduct"></app-product-detail>

<p>{{ detail.product()!.title }}</p>

A reference variable exposes the public API of the component.

10. Accessing Child Components from TypeScript

Instead of using a template variable, we can query the child via viewChild.

Parent component:

import { viewChild, AfterViewInit } from '@angular/core';
import { ProductDetailComponent } from '../product-detail/product-detail.component';

export class ProductListComponent implements AfterViewInit {
  productDetail = viewChild(ProductDetailComponent);

  ngAfterViewInit(): void {
    console.log('Child product:', this.productDetail()?.product());
  }
}

Legacy note

Previously:

@ViewChild(ProductDetailComponent) productDetail!: ProductDetailComponent;

11. Change Detection Strategy

Angular refreshes the UI when it detects changes.
Two strategies are available:

Strategy	Behavior
`Default `	Checks all components often
`OnPush `	Only updates when @Input references change or events occur

Enable OnPush:

changeDetection: ChangeDetectionStrategy.OnPush

OnPush dramatically improves performance for:

Large lists

Data-heavy UIs

Dashboard-like interfaces

12. Component Lifecycle Hooks

Lifecycle hooks let you run code at specific moments.

Hook	When it runs
`ngOnInit `	After inputs are set; component initialized
`ngOnDestroy `	Before component is removed
`ngOnChanges `	Whenever an input value changes
`ngAfterViewInit `	After child components and views are ready

12.1 ngOnInit

export class ProductDetailComponent implements OnInit {
  ngOnInit() {
    console.log('Product:', this.product());
  }
}

Why not use the constructor?

Inputs are not yet assigned when the constructor runs.

12.2 ngOnDestroy

Used for cleanup:

export class ProductDetailComponent implements OnDestroy {
  ngOnDestroy(): void {
    console.log('Component destroyed');
  }
}

Common use cases:

Clearing timers

Unsubscribing from RxJS streams

Releasing event listeners

Alternative: DestroyRef (modern, recommended)

constructor(destroyRef: DestroyRef) {
  destroyRef.onDestroy(() => {
    // cleanup
  });
}

12.3 ngOnChanges

Triggered when an input changes:

ngOnChanges(changes: SimpleChanges): void {
  const product = changes['product'];
  if (!product.isFirstChange()) {
    console.log('Old:', product.previousValue);
    console.log('New:', product.currentValue);
  }
}

Modern alternative

Signals can track changes more elegantly (Chapter 7).

12.4 ngAfterViewInit

Useful for reading child component data:

ngAfterViewInit() {
  console.log(this.productDetail()?.product());
}

13. Summary

In this chapter, you learned:

How to create standalone components

How to connect templates, classes, and styles

How to use modern control flow (@if, @for, @switch)

How to display and update data

How to handle events and user interactions

How components communicate (inputs & outputs)

How to use template reference variables

How to manage CSS with view encapsulation

How to optimize updates with change detection

How to hook into the component lifecycle

Part 2 — Structuring User Interfaces with Components

1. Anatomy of an Angular Component

Key metadata properties

Modern Angular (v16+) note

Legacy note

3. Creating a Component with the CLI

4. Displaying Data in the Template

4.1 Interpolation

4.2 Property Binding

Important

5. Angular’s Modern Control Flow Syntax (@if, @for, @switch)

5.1 @if (conditional rendering)

Legacy note (pre-Angular 17)

5.2 @for (looping)

Why <span class="editor-theme-code">track</span> is important

Legacy note

5.3 @switch

Legacy note

6. Adding Interactivity: Events and User Input

7. Styling Components

7.1 Class Binding

7.2 Style Binding

7.3 View Encapsulation

8. Component Communication

8.1 Passing Data Down (Input Binding)

Required inputs

8.2 Sending Events Up (Output Binding)

Legacy note

9. Template Reference Variables

10. Accessing Child Components from TypeScript

Legacy note

11. Change Detection Strategy

12. Component Lifecycle Hooks

12.1 ngOnInit

Why not use the constructor?

12.2 ngOnDestroy

Alternative: DestroyRef (modern, recommended)

12.3 ngOnChanges

Modern alternative

12.4 ngAfterViewInit

13. Summary

Why `<span class="editor-theme-code">track</span>` is important