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.