Introduction To Angular Input Signals - How Do They Compare With @Input? With example

In Angular, input signals are a new way to handle state changes and data binding in a more reactive and efficient manner, compared to the traditional @Input() property binding. This feature, introduced in Angular's latest versions, allows for a more streamlined approach to managing state across components.

Comparison of Input Signals with @Input()

1. Reactivity:

   • Input Signals: React to changes automatically, providing a more declarative way to manage state. They work similarly to observables, triggering updates when their value changes.
   • @Input(): Requires explicit change detection and is generally used to pass data from parent to child components. Changes require manual handling to ensure the child updates appropriately.

2. Simplicity:

   • Input Signals: Simplify the code needed to manage component interactions. They allow for cleaner and more concise code.
   • @Input(): Can lead to more boilerplate code, especially when combined with lifecycle hooks to manage updates.

3. Type Safety:

   • Input Signals: Typically provide better type safety and easier debugging.
   • @Input(): Type checking is done through TypeScript, but may not be as intuitive in complex scenarios.

Example

Using @Input()

Here’s a simple example using @Input().

Parent Component:

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

@Component({
  selector: 'app-parent',
  template: `<app-child [data]="parentData"></app-child>`
})
export class ParentComponent {
  parentData = 'Hello from Parent!';
}

Child Component:

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

@Component({
  selector: 'app-child',
  template: `<p>{{ data }}</p>`
})
export class ChildComponent {
  @Input() data!: string;
}

Using Input Signals

Now, let's use input signals instead.

Parent Component:

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

@Component({
  selector: 'app-parent',
  template: `<app-child [data]="dataSignal"></app-child>`
})
export class ParentComponent {
  dataSignal = signal('Hello from Parent!');
}

Child Component:

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

@Component({
  selector: 'app-child',
  template: `<p>{{ data() }}</p>`
})
export class ChildComponent {
  @Input() data!: () => string;
}

Key Takeaways

• Efficiency: Input signals can lead to improved performance and simpler code management.
• Reactivity: They provide a more intuitive way to handle state changes in a reactive programming model.
• Future-Proofing: Using input signals can make your application more adaptable to future Angular features and improvements.

Overall, input signals represent a significant step forward in Angular's approach to state management and data binding.