$watch with Angular 2

2 min read- views

How 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';
selector: 'example-component'
export class ExampleComponent {
public internalVal = null;
constructor() {}
set updateInternalVal(externalVal) {
this.internalVal = externalVal;