Smart and dumb component pattern in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a smart component in Angular?

A smart component manages data and logic. It fetches data, handles user actions, and passes data to dumb components. Think of it as the brain controlling the app's behavior.

beginner

What is a dumb component in Angular?

A dumb component only displays data and emits events. It does not manage data or logic. It’s like a simple display or form that relies on smart components for data.

intermediate

Why use the smart and dumb component pattern?

It separates concerns: smart components handle logic and data, dumb components handle UI. This makes code easier to read, test, and reuse, like having a manager and workers each with clear jobs.

intermediate

How do smart and dumb components communicate in Angular?

Smart components pass data to dumb components using @Input properties. Dumb components send events back using @Output EventEmitters. This is like sending messages back and forth clearly.

beginner

Give an example of a dumb component's responsibility.

A dumb component might show a list of items and emit an event when an item is clicked. It does not fetch or change the list, just shows it and tells the smart component what happened.

What is the main role of a smart component?

A Only display UI without logic

B Manage data and business logic

C Emit events without receiving data

D Style the application

Smart components handle data fetching, logic, and pass data to dumb components.

How does a dumb component receive data from a smart component?

A Using Angular routing

B Using @Output EventEmitters

C Directly accessing services

D Using @Input properties

Dumb components receive data via @Input properties from smart components.

Which of the following is NOT a characteristic of dumb components?

A Display data

B Emit user events

C Fetch data from APIs

D Have no business logic

Dumb components do not fetch data; smart components handle that.

Why is separating smart and dumb components helpful?

A Improves code clarity and reuse

B Makes components bigger

C Removes the need for services

D Avoids using Angular directives

Separation helps keep code clean, easier to test, and reuse components.

How do dumb components notify smart components about user actions?

A Using @Output EventEmitters

B Using @Input properties

C By calling smart component methods directly

D By changing global variables

Dumb components emit events with @Output to notify smart components.

Explain the difference between smart and dumb components in Angular.

Think about who controls data and who just shows it.

Describe how smart and dumb components communicate and why this pattern is useful.

Consider the flow of data and events between components.