Smart and dumb component pattern in Angular - Mini Project: Build & Apply

Smart and Dumb Component Pattern in Angular

📖 Scenario: You are building a simple Angular app to display a list of books. You want to separate the logic and data handling from the display. This helps keep your code clean and easy to manage.

🎯 Goal: Create a smart component that holds the book data and a dumb component that only shows the book titles. The smart component will pass the book list to the dumb component.

📋 What You'll Learn

Create a smart component called BookListComponent with a list of books

Create a dumb component called BookDisplayComponent that receives the list of books as an input

Use Angular's @Input() decorator in the dumb component to accept the book list

Display the book titles in the dumb component using an *ngFor loop

Use standalone components and Angular 17+ syntax with signals and new control flow directives

💡 Why This Matters

🌍 Real World

Separating smart and dumb components helps keep Angular apps organized and easier to maintain, especially as they grow.

💼 Career

Understanding this pattern is important for Angular developers to write clean, reusable, and testable code in professional projects.

1

Create the smart component with book data

Create a standalone Angular component called BookListComponent. Inside it, create a signal called books that holds this array of strings: ["The Hobbit", "1984", "Pride and Prejudice"].

Angular

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

@Component({
  selector: 'app-book-list',
  standalone: true,
  template: ``,
})
export class BookListComponent {
  // Your code here
}

Need a hint?

Use signal to create a reactive variable holding the book titles array.

2

Create the dumb component to display books

Create a standalone Angular component called BookDisplayComponent. Add an @Input() property called books of type string[]. The template should use *ngFor to show each book title inside a <li> element.

Angular

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

@Component({
  selector: 'app-book-display',
  standalone: true,
  template: `
    
      
    
  `,
})
export class BookDisplayComponent {
  @Input() books!: string[];
  // Your code here
}

Need a hint?

Use @Input() to receive data and *ngFor to loop over the books array.

3

Connect the smart component to the dumb component

In the BookListComponent template, add the <app-book-display> tag. Bind the books signal value to the dumb component's books input using Angular's property binding syntax.

Angular

import { Component, signal } from '@angular/core';
import { BookDisplayComponent } from './book-display.component';

@Component({
  selector: 'app-book-list',
  standalone: true,
  imports: [BookDisplayComponent],
  template: `
    
  `,
})
export class BookListComponent {
  books = signal(["The Hobbit", "1984", "Pride and Prejudice"]);
}

Need a hint?

Use [books]="books()" to bind the signal value to the dumb component input.

4

Add accessibility and finalize the dumb component

In the BookDisplayComponent template, add role="list" to the <ul> and role="listitem" to each <li>. This improves accessibility for screen readers.

Angular

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

@Component({
  selector: 'app-book-display',
  standalone: true,
  template: `
    
      {{ book }}
    
  `,
})
export class BookDisplayComponent {
  @Input() books!: string[];
  // Your code here
}

Need a hint?

Add role="list" to the <ul> and role="listitem" to each <li> for better accessibility.