A Typescript decorator to watch class properties changes
npm install on-property-change
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
}
}
``