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}`);
}

zhaosiyang / property-watch-decorator Goto Github PK

property-watch-decorator's Introduction

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

Example 1

Example 2, use generics, better typing

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

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

Important notes:

PITFALL 1

Correct way

PITFALL 2

Correct way 1

Correct way 2

property-watch-decorator's People

Contributors

Stargazers

Watchers

Forkers

property-watch-decorator's Issues

Recommend Projects

Recommend Topics

Recommend Org

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

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

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