Smart and dumb component pattern in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

Identify the role of the smart component

In Angular's smart and dumb component pattern, what is the primary responsibility of the smart component?

A Handle data fetching and business logic, passing data down to dumb components

B Only display UI elements without any logic or data fetching

C Directly manipulate the DOM for UI updates

D Serve as a reusable UI widget without inputs or outputs

💡 Hint

Think about which component talks to services and manages data.

The smart component manages data and business logic, fetching or updating data and passing it to dumb components for display.

❓ state_output

intermediate

State management in dumb components

What is the expected behavior of a dumb component regarding state in the smart and dumb component pattern?

A Receive data via inputs and emit events without managing state internally

B Maintain its own internal state and fetch data from services

C Directly update the global application state

D Handle routing and navigation logic

💡 Hint

Consider how dumb components communicate with smart components.

Dumb components receive data through inputs and notify smart components of user actions via outputs, without managing state themselves.

📝 Syntax

advanced

Correct @Input and @Output usage in dumb components

Which option correctly defines a dumb component with an input property 'items' and an output event 'selected' in Angular?

A

import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({selector: 'app-list', template: ''})
export class ListComponent {
  @Input() items: string[];
  @Output() selected: EventEmitter<string> = new EventEmitter();
}

B

import { Component, Input, Output } from '@angular/core';
@Component({selector: 'app-list', template: ''})
export class ListComponent {
  @Input items: string[] = [];
  @Output selected = new EventEmitter<string>();
}

C

import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({selector: 'app-list', template: ''})
export class ListComponent {
  items: string[] = [];
  selected = new EventEmitter<string>();
}

D

import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({selector: 'app-list', template: ''})
export class ListComponent {
  @Input() items: string[] = [];
  @Output() selected = new EventEmitter<string>();
}

💡 Hint

Remember the correct syntax for decorators and property initialization.

Option D correctly uses @Input and @Output decorators with proper property initialization and typing.

🔧 Debug

advanced

Why does the dumb component not update on input change?

A dumb component receives an array input from a smart component. The smart component updates the array by pushing new items, but the dumb component's view does not update. What is the likely cause?

A The dumb component forgot to declare the input property with @Input decorator

B The dumb component does not detect changes because the array reference did not change

C The smart component did not emit an event to notify the dumb component

D Angular does not support arrays as inputs

💡 Hint

Think about how Angular detects changes in inputs.

Angular's change detection checks for new object references. Mutating the array without changing its reference means the dumb component won't detect the change.

🧠 Conceptual

expert

Benefits of separating smart and dumb components

Which of the following is NOT a benefit of using the smart and dumb component pattern in Angular?

A Improved reusability of dumb components across different parts of the app

B Clear separation of concerns between data handling and UI rendering

C Automatic performance optimization without manual change detection

D Easier unit testing by isolating UI from business logic

💡 Hint

Consider what the pattern helps with and what it does not do automatically.

The pattern improves reusability, testing, and separation of concerns but does not automatically optimize performance or change detection.