Smart and dumb component pattern in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a dumb component with standalone setup.

Angular

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

@Component({
  selector: 'app-dumb',
  template: `<p>Dumb component works!</p>`,
  standalone: [1]
})
export class DumbComponent {}

Drag options to blanks, or click blank then click option'

Atrue

Bfalse

Cnull

Dundefined

Attempts:

3 left

💡 Hint

Common Mistakes

Setting standalone to false disables standalone mode.

Using null or undefined causes errors.

Setting standalone to true makes the component standalone, which is typical for dumb components.

2fill in blank

medium

Complete the code to inject a service into a smart component.

Angular

import { Component, inject } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-smart',
  template: `<p>Smart component loaded data: {{data}}</p>`,
  standalone: true
})
export class SmartComponent {
  private dataService = [1](DataService);
  data = this.dataService.getData();
}

Drag options to blanks, or click blank then click option'

Aprovide

Binject

CuseService

DgetService

Attempts:

3 left

💡 Hint

Common Mistakes

Using provide instead of inject causes errors.

useService and getService are not Angular functions.

The inject() function is used to get a service instance in Angular standalone components.

3fill in blank

hard

Fix the error in the dumb component to accept an input property.

Angular

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

@Component({
  selector: 'app-dumb',
  template: `<p>{{ [1] }}</p>`,
  standalone: true
})
export class DumbComponent {
  @Input() message!: string;
}

Drag options to blanks, or click blank then click option'

Amsg

Btext

Cmessage

Dinput

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different name than the input property causes undefined display.

Forgetting to use curly braces disables binding.

The template must use the input property name 'message' to display the passed value.

4fill in blank

hard

Fill both blanks to create a smart component that passes data to a dumb component.

Angular

import { Component } from '@angular/core';
import { DumbComponent } from './dumb.component';

@Component({
  selector: 'app-smart',
  standalone: true,
  imports: [[1]],
  template: `<app-dumb [message]="[2]"></app-dumb>`
})
export class SmartComponent {
  data = 'Hello from smart!';
}

Drag options to blanks, or click blank then click option'

ADumbComponent

Bdata

CSmartComponent

Dmessage

Attempts:

3 left

💡 Hint

Common Mistakes

Not importing DumbComponent causes template errors.

Passing wrong property names breaks data flow.

The smart component imports DumbComponent and passes its 'data' property to the dumb component's 'message' input.

5fill in blank

hard

Fill all three blanks to create a dumb component that emits an event and a smart component that listens to it.

Angular

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

@Component({
  selector: 'app-dumb',
  standalone: true,
  template: `<button (click)="[1].emit()">Click me</button>`
})
export class DumbComponent {
  @Output() [2] = new EventEmitter<void>();
}

@Component({
  selector: 'app-smart',
  standalone: true,
  imports: [DumbComponent],
  template: `<app-dumb ([3])="onClicked()"></app-dumb>`
})
export class SmartComponent {
  onClicked() {
    console.log('Button clicked');
  }
}

Drag options to blanks, or click blank then click option'

Aclicked

BclickEvent

CclickedEvent

Dclick

Attempts:

3 left

💡 Hint

Common Mistakes

Using different event names breaks communication.

Forgetting to emit the event disables interaction.

The dumb component defines an @Output() named 'clicked' and emits it on button click. The smart component listens to the 'clicked' event.

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