on-property-change
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.5 • Public • Published

    @OnChange

    A Typescript decorator to watch class properties changes

    Installation

    npm install on-property-change --save
    

    Examples

    Listening to a property changes

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

    Listening to multiple properties changes

    The doStuff method is called after both properties are initialised

    class Person {
      public name: string;
      public age: number;
    
      @OnChange(['name', 'age'])
      public doStuff() {
          console.log(`${this.name} is ${this.age} years old`);
      }
    }
    Usage
    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

    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
    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
    

    Listening to multiple properties separately

    You can have multiple decorated methods with any combinations of properties

    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
    const p = new Person();
    p.name = 'John';
    p.age = 18;
    Console output
    change name
    change age 1
    change age 2
    

    Optional method arguments

    The doStuff method can have arguments. They are the same values as the class fields.

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

    Compare with the previous value

    The history flag allows you to get the previous value of the property.

    class Person {
      name: string;
    
      @OnChange('name', { history: true })
      doStuff(name: PropertyChange<string>) {
          console.log(`User has changed name from ${name.previousValue} to ${name.currentValue}`);
      }
    }
    Usage
    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:

    export interface PropertyChange<T> {
        firstChange: boolean;
        previousValue: T;
        currentValue: T;
    }

    As a replacement for ngOnChanges in Angular projects

    @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
        }
    }

    Install

    npm i on-property-change

    DownloadsWeekly Downloads

    70

    Version

    2.1.5

    License

    MIT

    Unpacked Size

    17.5 kB

    Total Files

    19

    Last publish

    Collaborators

    • thupalo