Package Exports

property-watch-decorator

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (property-watch-decorator) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Property Watch Decorator

This package provides a `@OnChange` decorator that can be easily used to listen to changes of class properties.

I have a talk at ng-conf 2019 about why this package is useful and how I implement this package.

Install

npm install property-watch-decorator

Example 1

class PersonComponent {
    // Parameter value is inferred as any
    // Parameter change is optional, and inferred as SimpleChange<any>
    @OnChange(function(value, change) {
        console.log(`name is changed from ${change.previousValue} to ${value}`);
    })  
    name: string;
}

Example 2, use generics, better typing

class PersonComponent {
    // Parameter value is inferred as string
    // Parameter change is optional, and inferred as SimpleChange<string>
    @OnChange<string>(function(value, change) {
        console.log(`name is changed from ${change.previousValue} to ${value}`);
    })  
    name: string;
}

Example 3, type `this` if you want to access other member of the class (just for better IDE integration)

class PersonComponent {
 
    @OnChange<string>(function(this: PersonComponent, value, change) {
        console.log(`name is changed from ${change.previousValue} to ${value}`);
        console.log(`At the moment, age is ${this.age}`)
    })  
    name: string;
    
    age: number;
}

Example 4, using class method reference for onChange (No need to type `this` as in example 3)

class PersonComponent {
 
    @OnChange<string>('onNameChange')  
    name: string;
    
    age: number;

    onNameChange(value, change) {
      console.log(`name is changed from ${change.previousValue} to ${value}`);
      console.log(`At the moment, age is ${this.age}`);
    }
}

Important notes:

PITFALL 1

Arrow function should be avoided as this would make the function lose context. In this case, this would NOT refer to class instance but undefined For example: it is WRONG to use this way

class MyComponent {
  @OnChange(value => {
      console.log(`property1 is changed to ${value}`);
      console.log(this.property1)  // "this" would refer to undefined, cannot access "property1" of undefined
  })
  property1: any;
}

Correct way

Change arrow function to es5 function:

class MyComponent {
  @OnChange(function(value) {
      console.log(`property1 is changed to ${value}`);
      console.log(this.property1)   // "this" would refer to component instance
  })
  property1: any;
}

PITFALL 2

Callback function CANNOT be referred to class method, this would also cause this to be undefined For example:

class MyComponent {
  @OnChange(this.someFunction) // "this" would refer to undefined, cannot access "someFunction" of undefined
  property1: any;
  
  someFunction(value) {
    console.log(`property1 is changed to ${value}`);
    console.log(this.property1)   
  }
}

Correct way 1

class MyComponent {
  @OnChange('someFunction')
  property1;
  
  someFunction(value) {
      console.log(`property1 is changed to ${value}`);
  }
  
}

Correct way 2

class MyComponent {
  @OnChange(someFunction)
  property1;
}

function someFunction(value) {
    console.log(`property1 is changed to ${value}`);
}