How do signal inputs work in modern Angular components, and how are they different from the traditional Input decorator?

Signal inputs let a component receive data from its parent as a signal instead of a plain property, using the input function. This means the component can react to changes just like any other signal, and combine input values with computed signals easily, all while Angular tracks exactly when the value actually changes.

import { input, computed } from '@angular/core';

@Component({
  selector: 'app-price-tag',
  template: `<p>{{ formattedPrice() }}</p>`
})
export class PriceTagComponent {
  price = input.required<number>();
  formattedPrice = computed(() => `$${this.price().toFixed(2)}`);
}