# property-watch-decorator

> A decorator for watching property change

Latest version **1.2.5** (published 2019-06-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install property-watch-decorator
pnpm add property-watch-decorator
yarn add property-watch-decorator
bun add property-watch-decorator
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.5 |
| Published | 2019-06-16 |
| First published | 2019-01-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Siyang Kern Zhao |
| Maintainers | zhaosiyang |
| Keywords | property, watch, change, subscribe, Angular, decorator, TypeScript, setter |

## Links

- npm: https://www.npmjs.com/package/property-watch-decorator
- Repository: https://github.com/zhaosiyang/property-watch-decorator
- Homepage: https://github.com/zhaosiyang/property-watch-decorator#readme
- Issues: https://github.com/zhaosiyang/property-watch-decorator/issues
- npm.io page: https://npm.io/package/property-watch-decorator

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 1.2.5 (latest) — 2019-06-16
- 1.2.4 — 2019-05-19
- 1.2.3 — 2019-01-12
- 1.2.2 — 2019-01-08
- 1.2.1 — 2019-01-03
- 1.2.0 — 2019-01-03
- 1.1.1 — 2019-01-02
- 1.1.0 — 2019-01-01
- 1.0.0 — 2019-01-01

## 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](https://www.youtube.com/watch?v=rVDMmlCRvkg&list=PLOETEcp3DkCpimylVKTDe968yNmNIajlR&index=22) about why this package is useful and how I implement this package.

### Install
```npm install property-watch-decorator```

### Example 1
```typescript
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
```typescript
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)
```typescript
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)
```typescript
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
```typescript
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:
```typescript
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:
```typescript
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
```typescript
class MyComponent {
  @OnChange('someFunction')
  property1;
  
  someFunction(value) {
      console.log(`property1 is changed to ${value}`);
  }
  
}

```


#### Correct way 2
```typescript
class MyComponent {
  @OnChange(someFunction)
  property1;
}

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

```

---
_Source: https://npm.io/package/property-watch-decorator · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._