Built a custom two-way binding in angular

ngModel is an example of tracking a variable value change. This comes first to my mind when we talk about two-way binding.

Let’s create our custom property for two-way binding.

Step 1: Create a property(or field) with the @Input decorator

Step 2: Create an EventEmitter property with @Output decorator. The property name should be the same as the @Input property name with “change” as a suffix.

Here intentionally used different names for a DOM property (exported) of a component/attribute and field name used in a class (disabledChange vs onClickDisabled). When no argument is passed to @Input/@Output decorator property name will be the same as the DOM property.

That’s it, custom two-way binding implemented.