Angular Two-Way Data Binding and Watching for Changes in Parent Component

When you implement a two way binding of your own, you have to implement an event Emitter. The syntax for that is mandatory.

this means that you have a hook to listen to if the value changes.

Here is a demo :

<hello [(name)]="name" (nameChange)="doSomething()"></hello>

_name: string;
@Output() nameChange = new EventEmitter();

set name(val) {
  this._name = val;
  this.nameChange.emit(this._name);
}

@Input()
get name() {
  return this._name;
}

counter = 0;

ngOnInit() {
  setInterval(() => {
    this.name = this.name + ', ' + this.counter++;
  }, 1000);
}

Stackblitz

From what I know, this seems the less annoying way to use it, and any two way binding will follow the same rule no matter what, i.e. it ends with the Change word !

Your implementation is actually not two-way databinding, the parent and child component are just sharing a reference on the same skillTags variable.

The syntax [(tags)]='skillTags' is syntaxic sugar for [tags]='skillTags' (tagsChange)='skillTags = $event'

You need to implement tagsChange in the child component like this: @Output('tagsChange') tagsChange = new EventEmitter<any>();, then any time you want to modify tags into the children component, dont do it directly, but use this.tagsChange.emit(newValue) instead.

At this point, you'll have real two-way databinding and the parent component is the unique owner of the variable (responsible for applying changes on it and broadcasting changes to the children).

Now in your parent component, if you want to do more than skillTags = $event (implicitly done with [(tags)]='skillTags'), then just add another listener with (tagsChange)='someFunction($event)'.

StackBlitz Demo