“Banana in a box” input-output in your Angular component

Updated on July 16, 2020     Kisan Patel

How to make “Banana in a box” input-output in your Angular component?

some-component.ts

@Component({ selector: 'some-component' })
export class SomeComponent {
   @Input() value = 1;

   //inout and output have the same name but output has also "Change" postfix
   @Output() readonly valueChange = new EventEmitter<number>();

   //...
}

Usage:

Most common way of usage

<some-component [value]="value" (valueChange)="onValueChage($event)" >

But is also works with BANANA IN A BOX

<some-component [(value)]="value">