Skip to main content

Part 2 — Structuring User Interfaces with Components

Structuring User Interfaces with Components

Angular applications are built from components: small, focused building blocks that each own a part of the user interface and its behavior.

In this chapter you will learn:

  • How an Angular 20 component is structured
  • How the CLI generates components with the new naming scheme
  • How to display and control data in templates (with the modern @if, @for, @switch syntax)
  • How components talk to each other using inputs and outputs
  • How to style components and manage CSS encapsulation
  • How lifecycle hooks and change detection work at a high level
  • Where older syntax (*ngIf, @Input, etc.) still appears and how to read it

Anatomy of an Angular Component (Angular 20 Style)

In Angular 20, when you generate a component, the CLI now uses simpler file names:

  • product-list.ts (instead of product-list.component.ts)
  • product-list.html
  • product-list.css (Ninja Squad Blog)

The idea is to reduce redundancy: the file name already tells you what this unit is.

A minimal root component looks like this:

// src/app/app.ts
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

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

Explanation:

  • selector: 'app-root' – the tag you will use in index.html.
  • templateUrl / styleUrl – point to the external HTML and CSS files.
  • imports: [RouterOutlet] – because Angular 16+ uses standalone components, every component explicitly imports what it needs (other components, directives, pipes).
  • standalone: true – tells Angular that this class stands on its own and is not declared in an NgModule.
  • The class is named App (not AppComponent) to match the new naming style.

Legacy note: In older Angular versions, you would typically see:

  • File: app.component.ts
  • Class: AppComponent
  • No standalone: true and no imports array (components were declared in NgModules).

Creating a Component with the CLI

To generate a feature component in Angular 20:

ng generate component product-list

With the new naming convention, this will create:

src/app/product-list/product-list.ts
src/app/product-list/product-list.html
src/app/product-list/product-list.css
src/app/product-list/product-list.spec.ts

The TypeScript file might look like this:

// src/app/product-list/product-list.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.html',
  styleUrl: './product-list.css',
  standalone: true
})
export class ProductList {
}

Explanation:

  • The class name is ProductList (not ProductListComponent), consistent with the updated Angular 20 style guide.(Ninja Squad Blog)
  • This component does not import anything yet; we will add imports later when needed.
  • standalone: true makes this component directly usable in other components via the imports array.

To use this component inside App, you import it and add it to the imports array:

// src/app/app.ts
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { ProductList } from './product-list/product-list';

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

And in app.html:

<!-- src/app/app.html -->
<div class="content">
  <app-product-list></app-product-list>
</div>

Explanation:

  • Importing ProductList in App and putting it into imports makes Angular aware of the app-product-list selector in this template.
  • The template then simply uses <app-product-list>, which Angular binds to the ProductList class.

Displaying Data in the Template

Component templates can render values from the class using interpolation or property binding.

Interpolation

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

Explanation:

  • {{ title }} is interpolation; Angular evaluates title in the component instance and inserts its string value into the DOM.

Property binding

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

Explanation:

  • [innerText]="title" binds the DOM property innerText of the <h1> to the title property of the component.
  • The square brackets indicate one-way binding from the component to the DOM.

Modern Control Flow: @if, @for, @switch

Angular 17+ introduced a new control-flow syntax that is more readable and more efficient than the older directive-based approach.

Conditional rendering with @if

Example with a product list:

// product-list.ts
import { Component } from '@angular/core';

interface Product {
  id: number;
  title: string;
}

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.html',
  styleUrl: './product-list.css',
  standalone: true
})
export class ProductList {
  products: Product[] = [];
}

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

Explanation:

  • @if decides whether the block of HTML should exist in the DOM at all.
  • If products.length > 0, Angular adds the <h1> to the DOM; otherwise, it adds the <p>.

Legacy note (older Angular):

<h1 *ngIf="products.length > 0">Products ({{ products.length }})</h1>
<p *ngIf="products.length === 0">No products found!</p>

*ngIf is still supported, but the new @if syntax is the recommended style going forward.

Looping over data with @for

Let’s populate some mock products:

// product-list.ts
export class ProductList {
  products: Product[] = [
    { id: 1, title: 'Keyboard' },
    { id: 2, title: 'Microphone' },
    { id: 3, title: 'Web camera' },
    { id: 4, title: 'Tablet' }
  ];
}

Now, use @for in the template:

<!-- product-list.html -->
<ul class="pill-group">
  @for (product of products; track product.id) {
    <li class="pill">{{ product.title }}</li>
  } @empty {
    <p>No products found!</p>
  }
</ul>

Explanation:

  • @for (product of products; track product.id) iterates over products and exposes each item as product.
  • track product.id tells Angular to use the id field to keep DOM nodes stable when items change, improving performance.
  • @empty defines what to show when products is an empty array.

Legacy note:

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

*ngFor is the older syntax with similar behavior.

Switching templates with @switch

You can pick different content based on a value:

<!-- product-list.html -->
<ul class="pill-group">
  @for (product of products; track product.id) {
    <li class="pill">
      @switch (product.title) {
        @case ('Keyboard') { 🎹 }
        @case ('Microphone') { 🎤 }
        @default { 📦 }
      }
      {{ product.title }}
    </li>
  } @empty {
    <p>No products found!</p>
  }
</ul>

Explanation:

  • @switch (product.title) compares the title for each product.
  • @case defines what to render when the expression matches a specific value.
  • @default is rendered when no case matches.

Legacy note:

<div [ngSwitch]="product.title">
  <span *ngSwitchCase="'Keyboard'">🎹</span>
  <span *ngSwitchCase="'Microphone'">🎤</span>
  <span *ngSwitchDefault>📦</span>
</div>

Again, [ngSwitch] and *ngSwitchCase are the older equivalents.

Handling User Interaction (Event Binding)

To send information from the template back to the component, Angular uses event bindings.

Extend the ProductList class:

// product-list.ts
export class ProductList {
  products: Product[] = [
    { id: 1, title: 'Keyboard' },
    { id: 2, title: 'Microphone' },
    { id: 3, title: 'Web camera' },
    { id: 4, title: 'Tablet' }
  ];

  selectedProduct: Product | undefined;
}

Update the template:

<!-- product-list.html -->
<ul class="pill-group">
  @for (product of products; track product.id) {
    <li class="pill" (click)="selectedProduct = product">
      {{ product.title }}
    </li>
  } @empty {
    <p>No products found!</p>
  }
</ul>

@if (selectedProduct) {
  <p>You selected: <strong>{{ selectedProduct.title }}</strong></p>
}

Explanation:

  • (click)="selectedProduct = product" listens for the browser’s click event and executes the assignment in the component instance.
  • selectedProduct becomes the currently clicked product, and the @if block below reacts by showing its title.

Styling Components and View Encapsulation

Angular lets you bind classes and styles dynamically.

Class binding

<li
  class="pill"
  [class.selected]="selectedProduct && selectedProduct.id === product.id"
>
  {{ product.title }}
</li>

Explanation:

  • [class.selected]="...condition..." will add or remove the selected class based on whether the condition evaluates to true or false.

You can also bind an entire object:

// product-list.ts
isSelected(product: Product) {
  return this.selectedProduct?.id === product.id;
}

<li
  class="pill"
  [class.selected]="isSelected(product)"
>
  {{ product.title }}
</li>

Style binding

<p [style.color]="selectedProduct ? 'green' : 'inherit'">
  {{ selectedProduct ? 'Product chosen' : 'No product selected' }}
</p>

Explanation:

  • [style.color] controls a single style property dynamically, based on component state.

View encapsulation

By default, Angular scopes CSS per component (Emulated mode), so styles from product-list.css will only affect that component’s template.

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

@Component({
  selector: 'app-product-detail',
  templateUrl: './product-detail.html',
  styleUrl: './product-detail.css',
  standalone: true,
  encapsulation: ViewEncapsulation.Emulated // default
})
export class ProductDetail {
}

If you explicitly set:

encapsulation: ViewEncapsulation.None

then styles defined in product-detail.css can leak into other parts of the app. This can be useful for global styling, but must be used carefully.

Passing Data Between Components (Inputs and Outputs)

Real-world applications rarely keep all UI in a single component. Often, a parent component owns the data and passes a piece of it down to a child component.

Passing data down with input()

Create a detail component:

// src/app/product-detail/product-detail.ts
import { Component, input } from '@angular/core';
import type { Product } from '../product-list/product-list';

@Component({
  selector: 'app-product-detail',
  templateUrl: './product-detail.html',
  styleUrl: './product-detail.css',
  standalone: true
})
export class ProductDetail {
  product = input<Product>();
}

Template:

<!-- product-detail.html -->
@if (product()) {
  <p>
    You selected:
    <strong>{{ product()!.title }}</strong>
  </p>
}

Explanation:

  • product = input<Product>() defines an input signal for this component.
  • In the template, product() reads the current value of that input.
  • The @if guard ensures we only render details when a product is actually provided.

Now, use ProductDetail in ProductList:

// product-list.ts
import { Component } from '@angular/core';
import { ProductDetail } from '../product-detail/product-detail';

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.html',
  styleUrl: './product-list.css',
  standalone: true,
  imports: [ProductDetail]
})
export class ProductList {
  products: Product[] = [ /* ... */ ];
  selectedProduct: Product | undefined;
}

<!-- product-list.html -->
<ul class="pill-group">
  @for (product of products; track product.id) {
    <li class="pill" (click)="selectedProduct = product">
      {{ product.title }}
    </li>
  } @empty {
    <p>No products found!</p>
  }
</ul>

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

Explanation:

  • [product]="selectedProduct" binds the parent’s selectedProduct property into the child’s product input.
  • Angular takes care of updating the child when the parent selection changes.

Legacy note: Previously, you would see:

@Input() product!: Product;

instead of product = input<Product>().

Sending events up with output()

Let the detail component notify the parent that the user wants to add the product to a cart.

In ProductDetail:

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

@Component({
  selector: 'app-product-detail',
  templateUrl: './product-detail.html',
  styleUrl: './product-detail.css',
  standalone: true
})
export class ProductDetail {
  product = input<Product>();
  added = output<Product>();

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

Template:

<!-- product-detail.html -->
@if (product()) {
  <div>
    <p>
      You selected:
      <strong>{{ product()!.title }}</strong>
    </p>
    <button (click)="addToCart()">Add to cart</button>
  </div>
}

Explanation:

  • added = output<Product>() declares an output event that can carry a Product payload.
  • this.added.emit(...) triggers the event.

In the parent (ProductList):

// product-list.ts
onAdded(product: Product) {
  alert(`${product.title} added to the cart!`);
}

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

Explanation:

  • (added)="onAdded($event)" listens to the child’s added output.
  • $event contains the product emitted by addToCart().
  • The parent can now update a cart, fire analytics, or display a message.

Legacy note: Older Angular projects use:

@Output() added = new EventEmitter<Product>();

instead of added = output<Product>().

Template Reference Variables and viewChild

Sometimes you need direct access to a child component instance.

Template reference variable

<!-- product-list.html -->
<app-product-detail
  #detail
  [product]="selectedProduct"
  (added)="onAdded($event)"
></app-product-detail>

<p *ngIf="detail.product()">
  Detail says: {{ detail.product()!.title }}
</p>

Explanation:

  • #detail creates a template reference to the ProductDetail instance.
  • This reference exposes the public API of ProductDetail (here: product()).

Querying a child in TypeScript with viewChild

You can also get the child instance from the parent class:

// product-list.ts
import { Component, AfterViewInit, viewChild } from '@angular/core';
import { ProductDetail } from '../product-detail/product-detail';

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.html',
  styleUrl: './product-list.css',
  standalone: true,
  imports: [ProductDetail]
})
export class ProductList implements AfterViewInit {
  productDetail = viewChild(ProductDetail);

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

Explanation:

  • viewChild(ProductDetail) tells Angular to look for a ProductDetail in this component’s view.
  • ngAfterViewInit is the hook where the child is guaranteed to be created and accessible.

Legacy note: Previously:

@ViewChild(ProductDetail) productDetail!: ProductDetail;

Change Detection Strategy

Angular automatically refreshes views when data changes. By default, it runs change detection for the entire component tree on each relevant event.

You can optimize this with ChangeDetectionStrategy.OnPush:

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

@Component({
  selector: 'app-product-detail',
  templateUrl: './product-detail.html',
  styleUrl: './product-detail.css',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ProductDetail {
  // ...
}

Explanation:

  • With OnPush, Angular will only re-check this component when:

    • An input reference changes
    • An event handler on this component runs
    • An observable bound in the template emits (via async pipe), etc.

  • This significantly improves performance in large and complex UIs.

Lifecycle Hooks Overview

Lifecycle hooks allow you to run custom logic at specific moments in a component’s life.

Common hooks:

  • ngOnInit – runs after the component’s inputs are first set.
  • ngOnDestroy – runs right before Angular removes the component from the DOM.
  • ngOnChanges – runs whenever an input binding changes.
  • ngAfterViewInit – runs after the view and child views have been initialized.

Example:

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

@Component({
  selector: 'app-product-detail',
  templateUrl: './product-detail.html',
  styleUrl: './product-detail.css',
  standalone: true
})
export class ProductDetail
  implements OnInit, OnDestroy, OnChanges, AfterViewInit {

  ngOnInit(): void {
    // Good place to fetch data or initialize values
    console.log('ProductDetail initialized');
  }

  ngOnChanges(changes: SimpleChanges): void {
    // React to input changes
    console.log('Changes:', changes);
  }

  ngAfterViewInit(): void {
    // Child components and view are ready
    console.log('View initialized');
  }

  ngOnDestroy(): void {
    // Cleanup: timers, subscriptions, listeners, etc.
    console.log('ProductDetail destroyed');
  }
}

Explanation:

  • Each hook gives you a predictable place to put specific kinds of logic:

    • ngOnInit instead of doing heavy work in the constructor.
    • ngOnDestroy to release resources.
    • ngOnChanges to react to new input values.
    • ngAfterViewInit to work with child components or DOM elements that weren’t available earlier.

Summary

In this chapter you have seen how, in Angular 20:

  • Components are generated with simpler file names like product-list.ts, product-list.html, product-list.css.
  • Standalone components (standalone: true) and explicit imports have become the default way to structure an app.
  • The modern control-flow syntax (@if, @for, @switch) replaces older structural directives in new code, while you still need to understand *ngIf, *ngFor and ngSwitch for legacy templates.
  • Data flows into components via input() and out via output(), replacing @Input and @Output in new code.
  • Class and style bindings, along with view encapsulation, give you fine control over component-level CSS.
  • Template reference variables and viewChild let you reach deeper into the component tree when necessary.
  • Change detection strategies and lifecycle hooks help you tune both performance and behavior.
Back to top