Angular Signal Inputs

Revolutionize Your Angular Components with Reactive Inputs

If you’ve been coding with Angular for a while, you might have had this little wish tucked in the back of your mind — a wish for something more reactive, something that could really jazz up the way we handle component inputs.

Well, guess what? Our coding prayers have been answered! Angular has introduced a game-changer: Signal Inputs. And oh boy, are they exciting!

Why Reactive Inputs?

Before we dive into reactive inputs, let’s first paint a picture of a scenario where they truly shine.

Imagine a isEven component. Its task is to take a number and determine if it’s even. Very simple.

As we set out to create our isEven component in Angular, we have two traditional paths: using a setter or ngOnChanges. Let's start by crafting it with decorator inputs and a setter.

@Component({
  standalone: true,
  selector: 'is-even',
  template: `<h1>Is Even: {{ isEven }}</h1>`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class IsEvenComponent {
  isEven: boolean | undefined;
  @Input({required: true}) set counter(c: number){
    this.isEven = c % 2 === 0;
  };
}