$watch con Angular 2

En mi post anterior, estuve hablando sobre cómo implementar eventos de Angular 1 en Angular 2. Pero en el fragmento de código que uso como ejemplo podemos encontrar otra cosa que no existe en Angular 2: $watch.

Empiezo definiendo el problema. Podemos tener una directiva o componente de Angular 1 como este:

var module = angular.module("myApp");

module.directive('exampleDirective', function () {
  return {
    template: '<div>{{internalVar}}</div>',
    scope: {
      externalVar: "="
    },
    controller: function(scope, element) {
      scope.$watch('externalVar', function(newVal, oldVal) {
        if (newVal !== oldVal) {
          scope.internalVar = newVal;
        }
      });
    }
});

Si queremos migrar este código a Angular 2 encontramos un problema: el nuevo Angular no tiene scope, así que no tiene $watch. ¿Cómo podemos observar un atributo de directiva? La solución es la sintaxis set de ES6.

La sintaxis set vincula una propiedad de objeto a una función para ser llamada cuando hay un intento de establecer esa propiedad.

De MDN

Así que podemos vincular la entrada para un componente a una función que hace lo mismo que la función $watch.

import { Component, Input } from '@angular/core';

@Component({
  selector: 'example-component'
})
export class ExampleComponent {
  public internalVal = null;

  constructor() {}

  @Input('externalVal')
  set updateInternalVal(externalVal) {
    this.internalVal = externalVal;
  }
}