Dumb and Smart components

In Angular, dumb and smart components are design patterns that promote separation of concerns, making applications more modular and easier to maintain. Let’s explore how they work with @Input().

Dumb Component

A dumb component (also known as a presentational component) is focused solely on presenting data and handling UI logic. It receives data through @Input() and emits events using @Output(). These components are not aware of the application’s state or business logic—they simply display what they are given.

Characteristics of a Dumb Component:

• Receives data using @Input().
• Emits events using @Output() to communicate with the parent.
• Contains minimal or no business logic.
• Reusable across different parts of the application.
• Does not directly modify the state of the application.

//ng generate Dumb
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-dumb',
  template: `
    <div>
      <h3>Dumb Component</h3>
      <p>{{ title }}</p>
      <button (click)="onButtonClick()">Click Me</button>
    </div>
  `,
})
export class DumbComponent {
  @Input() title!: string; // Receives data
  @Output() buttonClicked = new EventEmitter<void>(); // Emits event

  onButtonClick() {
    this.buttonClicked.emit(); // Notify parent
  }
}

Smart Component

A smart component (also known as a container component) manages the application’s state and handles business logic. It interacts with services, manages data transformations, and passes data to dumb components via @Input().

Characteristics of a Smart Component:

• Supplies data to dumb components using @Input().
• Handles events emitted by dumb components using @Output().
• Interacts with services to fetch or update data.
• Contains business logic or application state management.
• Focuses on orchestrating and coordinating.

// ng generate Smart
import { Component } from '@angular/core';

@Component({
  selector: 'app-smart',
  template: `
    <div>
      <h2>Smart Component</h2>
      <app-dumb
        [title]="message"
        (buttonClicked)="handleButtonClick()"
      ></app-dumb>
    </div>
  `,
})
export class SmartComponent {
  message: string = 'Hello from Smart Component!';

  handleButtonClick() {
    console.log('Button clicked in Dumb Component!');
  }
}

How @Input() Fits Into the Pattern

In Dumb Components:

• @Input() is the primary way a dumb component receives data.
• The dumb component does not modify or process this data; it only renders it.

In Smart Components:

• The smart component provides the data to the dumb component using @Input().
• The smart component owns and controls the data, deciding what to pass and when to update it.

Advantages of Using Dumb and Smart Components

1. Reusability:
   • Dumb components can be used across different applications or scenarios since they rely on @Input() for data.
2. Separation of Concerns:
   • Smart components focus on business logic.
   • Dumb components handle UI rendering.
3. Simplified Testing:
   • Dumb components are easier to test because they have no dependencies on services or state.
4. Modularity:
   • Clear distinction between UI and logic enhances maintainability.

Summary Table

Feature	Dumb Component	Smart Component
Primary Responsibility	Display data, handle UI	Manage state, handle logic
Data Source	Receives via @Input()	Fetches or modifies state
Event Handling	Emits via @Output()	Listens to emitted events
Dependencies	None	Services, state management
Reusability	High	Moderate

Final Thoughts

Using dumb and smart components effectively helps maintain a clean architecture in Angular applications. @Input() is central to enabling this pattern, as it allows dumb components to remain decoupled from business logic while still being fully functional within the application.