$watch with Angular 2
‐ 1 min readHow to migrate the $watch feature from AngularJS to Angular2
In my previous post, I was talking about how
to implement events from Angular 1 in Angular 2. But in the snippet of code that
I use as an example we can find another thing that not exists in Angular 2:
$watch
.
I start defining the problem. We can have a directive or Angular 1 component like that:
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;
}
});
}
});
If we want to migrate this code to Angular 2 we find a trouble: the new Angular
don’t have scope
, so it don’t have $watch
. How we can watch a directive
attribute? The solution is the set syntax from ES6.
The set syntax binds an object property to a function to be called when there is an attempt to set that property.
From MDN
So we can bind the input for a component to a function that does the same as the
$watch
function.
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;
}
}