Smart and dumb component pattern in Angular - Step-by-Step Execution

Concept Flow - Smart and dumb component pattern

Smart Component

↓

Fetches Data

↓

Passes Data as Inputs

↓

Dumb Component

↓

Displays Data

↓

Emits Events

↓

Smart Component Handles Events

↓

Updates Data or State

Smart components get data and handle logic, then pass data to dumb components. Dumb components show data and send events back.

Execution Sample

Angular

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

@Component({ selector: 'dumb', template: `<button (click)="clicked()">{{label}}</button>` })
export class DumbComponent {
  @Input() label = '';
  @Output() action = new EventEmitter<void>();
  clicked() { this.action.emit(); }
}

A dumb component shows a button with a label and emits an event when clicked.

Execution Table

Step	Component	Action	Data/State Before	Event Emitted	Data/State After
1	Smart	Initialize with data	items = []	None	items = ['Save', 'Cancel']
2	Smart	Pass data to Dumb	items = ['Save', 'Cancel']	None	Dumb receives label='Save'
3	Dumb	Render button	label='Save'	None	Button shows 'Save'
4	User	Clicks button	Button shows 'Save'	Click event	None
5	Dumb	Emit action event	Clicked	action.emit()	None
6	Smart	Handle event	items = ['Save', 'Cancel']	Received action event	Perform save logic
7	Smart	Update state	After save	None	items updated or UI refreshed
8	Smart	Pass updated data	Updated items	None	Dumb receives new label if changed
9	Dumb	Render updated button	New label	None	Button shows updated label
10	End	No more actions	Final state	None	UI stable

💡 User stops interacting; smart component manages data and dumb component only displays and emits events.

Variable Tracker

Variable	Start	After 1	After 6	After 7	Final
items	[]	['Save', 'Cancel']	['Save', 'Cancel']	['Save', 'Cancel']	['Save', 'Cancel']
label	''	'Save'	'Save'	'Save'	'Save'
eventEmitted	false	false	true	false	false

Key Moments - 3 Insights

Why does the dumb component not fetch or change data?

Because the dumb component only receives data via inputs and emits events; it does not handle data fetching or logic. See execution_table steps 2 and 5.

How does the smart component know when to update data?

The dumb component emits an event when user interacts (step 5), and the smart component listens and updates data accordingly (step 6).

Why pass data down and events up instead of sharing data directly?

This keeps dumb components simple and reusable, and smart components control data flow and logic, improving separation of concerns.

Visual Quiz - 3 Questions

Look at the execution_table, what is the label value passed to the dumb component at step 2?

A 'Cancel'

B 'Save'

C '' (empty string)

D ['Save', 'Cancel']

💡 Hint

Check the 'Data/State After' column at step 2 where dumb receives label='Save'.

At which step does the dumb component emit an event to the smart component?

A Step 5

B Step 6

C Step 3

D Step 8

💡 Hint

Look for 'Emit action event' in the 'Action' column in execution_table.

If the smart component updates the label after handling the event, which step shows the dumb component rendering the updated label?

A Step 4

B Step 7

C Step 9

D Step 10

💡 Hint

Step 9 shows 'Render updated button' with new label in execution_table.

Concept Snapshot

Smart and dumb components pattern in Angular:
- Smart components fetch and manage data.
- Dumb components receive data via @Input and display it.
- Dumb components emit events via @Output.
- Smart components listen to events and update data.
- This separates logic (smart) from UI (dumb) for clarity and reuse.

Full Transcript

The smart and dumb component pattern splits responsibilities in Angular apps. Smart components handle data fetching and logic. They pass data down to dumb components using inputs. Dumb components only display data and emit events when users interact. The smart component listens to these events and updates data or state accordingly. This keeps dumb components simple and reusable, while smart components control the app's behavior. The execution table shows the smart component initializing data, passing it to dumb, dumb rendering and emitting events, and smart handling those events to update state. Variables like items and label change as data flows. This pattern helps beginners understand clear separation of concerns in Angular components.