@OnChange

A Typescript decorator to watch class properties changes

Installation

``
npm install on-property-change --save
`

Examples

$3

`ts
class Person {
name: string;

@OnChange('name')
doStuff() {
console.log(Name has been changed:, this.name);
}
}
`
##### Usage
`ts
const p = new Person();
p.name = 'John';
p.name = 'Kyle';
`

##### Console output
`
Name has been changed: John
Name has been changed: Kyle
`

$3


The doStuff method is called after both properties are initialised
`ts
class Person {
public name: string;
public age: number;

@OnChange(['name', 'age'])
public doStuff() {
console.log(${this.name} is ${this.age} years old);
}
}
`
##### Usage
`ts
const p = new Person();
p.name = 'John';
p.age = 18;
p.age = 22;
`
##### Console output
`
John is 18 years old
John is 22 years old
`
#### Bulk change
The bulk flag means to call the method only when all the properties have changed
`ts
class Point {
public x: number;
public y: number;

@OnChange(['x', 'y'], { bulk: true })
public move(): void {
console.log(Move to ${this.x}:${this.y});
}
}
`
##### Usage
`ts
const p = new Point();
p.x = '5';
p.x = '3';
p.y = 8; // Move to 3:8
p.y = 16;
p.x = 10; // Move to 10:16
`
##### Console output
`
Move to 3:8
Move to 10:16
`


$3


You can have multiple decorated methods with any combinations of properties
`ts
class Person {
name: string;
age: number;

@OnChange('name')
doStuff() {
console.log('change name')
}

@OnChange('age')
doStuff2() {
console.log('change age 1')
}

@OnChange('age')
doStuff3() {
console.log('change age 2')
}
}
`
##### Usage
`ts
const p = new Person();
p.name = 'John';
p.age = 18;
`

##### Console output
`
change name
change age 1
change age 2
`

$3


The doStuff method can have arguments. They are the same values as the class fields.
`ts
class Person {
public name: string;
public age: number;

@OnChange(['name', 'age'])
public doStuff(name: string, age: number) {
console.log(${name} is ${age} years old);
}
}
`

$3


The history flag allows you to get the previous value of the property.
`ts
class Person {
name: string;

@OnChange('name', { history: true })
doStuff(name: PropertyChange) {
console.log(User has changed name from ${name.previousValue} to ${name.currentValue});
}
}
`
##### Usage
`ts
const p = new Person();
p.name = 'John';
p.name = 'Kyle';
`

##### Console output
`
User has changed name from undefined to John
User has changed name from John to Kyle
`

The full metadata looks like this:
`ts
export interface PropertyChange {
firstChange: boolean;
previousValue: T;
currentValue: T;
}
`

$3


`ts
@Component({
selector: 'app-person-card',
templateUrl: './person-card.component.html',
styleUrls: ['./person-card.component.css']
})
export class PersonCardComponent {
@Input() name: string;

@OnChange('name')
doStuff() {
// do stuff
}
}
``