Question

What’s the best way to implement two-way data binding between Angular components?

I'm looking to implement two-way data binding between Angular components. Can someone guide me on the best approach to achieve this?

Answer 1

With Angular’s evolution across its development, signals have become the best choice for two-way data binding.

Example using signals: 

@Component({

selector: 'app-counter',

template: `

<button (click)="decrement()">-</button>

<span>{{count()}}</span>

<button (click)="increment()">+</button>

`

})

export class CounterComponent {

count = input<number>(10);

increment() {

this.count.update(value => value + 1);

}

decrement() {

this.count.update(value => value - 1);

}

}