GithubHelp home page GithubHelp logo

stephanmeesters / on-property-change Goto Github PK

View Code? Open in Web Editor NEW

This project forked from cwayfinder/on-property-change

0.0 0.0 0.0 188 KB

A Typescript decorator to watch class properties changes

License: MIT License

JavaScript 1.93% TypeScript 98.07%

on-property-change's Introduction

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

on-property-change's People

Contributors

buzz-t avatar cwayfinder avatar dependabot[bot] avatar rokikon avatar stephanmeesters avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.