Say Goodbye to ngOnChanges() ..Hello Signal @Input in Angular 20

Arbi Jridi — Mon, 09 Jun 2025 11:44:59 +0000

With Angular 20, the @Input decorator got a signal-powered upgrade. You can now use Signals to receive input values reactively, making Angular components cleaner and more powerful.

What Are Signals?

Signals are reactive primitives introduced in Angular to help manage state and reactivity without external libraries like RxJS. They track dependencies and automatically update values when the source changes.

🎯 What’s New in Angular 20?

Angular 20 brings:

Signal-based inputs via @Input({ signal: true })
Cleaner reactivity without manual ngOnChanges
Seamless integration with signal-based components
Traditional vs Signal Input
Traditional Input @Input() name: string; You would need ngOnChanges or manual checks to respond to changes.

✅ Input with Signals in Angular 20

import { Component, Input, signal } from '@angular/core';
@Component({
  selector: 'app-greeting',
  template: `<h1>Hello, {{ name() }}!</h1>`
})
export class GreetingComponent {
  @Input({ signal: true }) name: Signal<string>;
}

🧠 Now, name is a signal, and you can call it as a function (name()), which automatically re-runs anything that depends on it when it changes.

📘 Full Example: Parent to Child Communication Using Signal @Input

👨‍👩‍👧 Parent Component

@Component({
  selector: 'app-parent',
  template: `
    <input [(ngModel)]="userName" placeholder="Enter name" />
    <app-greeting [name]="userName"></app-greeting>
  `
})
export class ParentComponent {
  userName = 'َArbi';
}

👶 Child Component with Input Signal

import { Component, Input, Signal } from '@angular/core';
@Component({
  selector: 'app-greeting',
  template: `
    <div class="greeting">Hello, {{ name() }}!</div>
  `
})
export class GreetingComponent {
  @Input({ signal: true }) name!: Signal<string>;
}

🎯 Why Use Signal Inputs?

✅ Benefits

No need for ngOnChanges
Easier to compose with computed signals
Automatic change detection
Fine-grained reactivity

🧩 Combine with `computed()` or `effect()`

import { computed, effect } from '@angular/core';
@Component({
  selector: 'app-user-info',
  template: `
    <p *ngIf="isLongName()">Long name detected</p>
  `
})
export class UserInfoComponent {
  @Input({ signal: true }) name!: Signal<string>;
  isLongName = computed(() => this.name().length > 5);
  constructor() {
    effect(() => {
      console.log('User name changed:', this.name());
    });
  }
}

🔚 Conclusion

Angular 20’s support for signal-based @Input is a leap toward declarative and reactive Angular. You get cleaner code, automatic updates, and better performance.

If you’re building a modern Angular app with signals, this feature is a must-use.
ــــــــــــــــــــــ
Thanks for reading and if you want more of this content about Angular and other cool stuff,
see my repo here :Github
my personal Blog : NgBlog

DEV Community: Arbi Jridi