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.

Practice

1. What is the main role of a smart component in Angular's smart and dumb component pattern?

easy

A. To handle user input events only

B. To only display data without logic

C. To manage data and business logic

D. To style the user interface

Solution

1. Step 1: Understand smart component responsibilities

   Smart components are designed to handle data fetching, state management, and business logic.

2. Step 2: Differentiate from dumb components

   Dumb components focus on displaying data and emitting events, not managing data or logic.

3. Final Answer:

   To manage data and business logic -> Option C

4. Quick Check:

   Smart component = data and logic [OK]

Hint: Smart components handle data and logic, dumb ones display only [OK]

Common Mistakes:

• Confusing dumb components as managing data
• Thinking smart components only display UI
• Assuming smart components handle styling only

2. Which of the following is the correct way to pass data from a smart component to a dumb component in Angular?

easy

A. Use a service to directly modify dumb component variables

B. @Output() data: any; in dumb component and bind in template

C. Use @ViewChild to access dumb component data

D. @Input() data: any; in dumb component and bind in template

Solution

1. Step 1: Identify data flow direction

   Data flows from smart to dumb components via inputs.

2. Step 2: Use Angular syntax for input binding

   Dumb components declare @Input() properties to receive data from parents.

3. Final Answer:

   @Input() data: any; -> Option D

4. Quick Check:

   Data to dumb = @Input() [OK]

Hint: Use @Input() to pass data down from smart to dumb [OK]

Common Mistakes:

• Using @Output() to pass data down instead of events up
• Trying to access dumb component data directly via ViewChild
• Modifying dumb component state via services without inputs

3. Given the following Angular code, what will be the output displayed by the dumb component?

/* Smart component template */
<app-dumb [title]="pageTitle" (clicked)="onClicked()"></app-dumb>

/* Smart component class */
pageTitle = 'Hello World';
onClicked() { console.log('Clicked!'); }

/* Dumb component template */
<h1>{{ title }}</h1>
<button (click)="clicked.emit()">Click Me</button>

/* Dumb component class */
@Input() title: string;
@Output() clicked = new EventEmitter<void>();

medium

A. Displays 'Hello World' and logs 'Clicked!' on button click

B. Displays nothing and logs 'Clicked!' on button click

C. Displays 'Hello World' but does not log anything

D. Throws an error because of missing @Output() decorator

Solution

1. Step 1: Analyze data binding from smart to dumb

   The smart component passes 'Hello World' via [title] input, so dumb displays it.

2. Step 2: Analyze event emission and handling

   The dumb component emits clicked event on button click, smart component listens and logs 'Clicked!'.

3. Final Answer:

   Displays 'Hello World' and logs 'Clicked!' on button click -> Option A

4. Quick Check:

   Input shows title, output triggers log [OK]

Hint: Input shows data, output triggers event handled by smart [OK]

Common Mistakes:

• Thinking dumb component logs directly
• Assuming missing decorators cause runtime error here
• Ignoring event binding from dumb to smart

4. Identify the error in this dumb component code that prevents it from emitting events to the smart component:

@Component({
  selector: 'app-dumb',
  template: `<button (click)="clicked.emit()">Click</button>`
})
export class DumbComponent {
  clicked = new EventEmitter<void>();
}

medium

A. EventEmitter should be imported from '@angular/core/testing'

B. Missing @Output() decorator on the clicked property

C. The template syntax for click event is incorrect

D. The clicked property should be a function, not EventEmitter

Solution

1. Step 1: Check event emitter declaration

   The clicked property must have @Output() decorator to emit events to parent.

2. Step 2: Verify imports and syntax

   EventEmitter is correctly imported from '@angular/core', template syntax is correct.

3. Final Answer:

   Missing @Output() decorator on the clicked property -> Option B

4. Quick Check:

   @Output() missing = no event emission [OK]

Hint: Always add @Output() to EventEmitter properties [OK]

Common Mistakes:

• Forgetting @Output() decorator
• Importing EventEmitter from wrong package
• Miswriting template event binding syntax

5. You want to refactor a large Angular component that mixes data fetching, logic, and UI display into smart and dumb components. Which approach best follows the smart and dumb component pattern?

hard

A. Create a smart component to fetch data and handle logic, pass data via @Input() to dumb components that only display UI and emit events

B. Move all logic and data fetching into dumb components and keep smart components only for styling

C. Combine smart and dumb components into one to reduce complexity

D. Use dumb components to fetch data and smart components to display UI

Solution

1. Step 1: Separate concerns by responsibility

   Smart components should handle data fetching and logic, dumb components focus on UI and user interaction.

2. Step 2: Use Angular bindings correctly

   Pass data from smart to dumb via @Input() and receive events via @Output().

3. Final Answer:

   Create a smart component to fetch data and handle logic, pass data via @Input() to dumb components that only display UI and emit events -> Option A

4. Quick Check:

   Smart = logic/data, Dumb = UI only [OK]

Hint: Smart handles data/logic; dumb handles UI and events [OK]

Common Mistakes:

• Putting logic in dumb components
• Merging smart and dumb components unnecessarily
• Reversing data flow direction