feat: Added @onchange closes #2

README.md

@@ -24,6 +24,7 @@ unnecessarily.
   - [EnumKeyFormatPipe](#enumkeyformatpipe)
 - [Helper Classes](#helper-classes)
   - [RxDestroy](#rxdestroy)
+  - [OnChange](#onchange)
 
 ## Installation
 
@@ -288,6 +289,11 @@ interval(1000)
   .subscribe(_ => {});
 ```
 
+### OnChange
+
+A decorator for change detection on properties
+https://blog.angularindepth.com/creatively-decouple-ngonchanges-fab95395cc6e
+
 ## License
 
 MIT © [Jaspero Ltd](mailto:[email protected])

angular.json

@@ -7,7 +7,7 @@
       "root": "",
       "sourceRoot": "src",
       "projectType": "application",
-      "prefix": "app",
+      "prefix": "jp",
       "schematics": {
         "@schematics/angular:component": {
           "styleext": "scss"

package.json

@@ -37,6 +37,7 @@
     "@angular/platform-browser": "~7.1.0",
     "@angular/platform-browser-dynamic": "~7.1.0",
     "@angular/router": "~7.1.0",
+    "@jaspero/ng-helpers": "^1.0.0",
     "core-js": "^2.5.4",
     "rxjs": "~6.3.3",
     "tslib": "^1.9.0",

projects/ng-helpers/src/helpers/on-change.ts

@@ -0,0 +1,42 @@
+/**
+ * Courtesy of
+ * https://blog.angularindepth.com/creatively-decouple-ngonchanges-fab95395cc6e
+ */
+
+export interface SimpleChange<T> {
+  firstChange: boolean;
+  previousValue: T;
+  currentValue: T;
+  isFirstChange: () => boolean;
+}
+
+export function OnChange<T = any>(
+  callback: (value: T, simpleChange?: SimpleChange<T>) => void
+) {
+  let _cachedValue: T;
+  let _isFirstChange = true;
+
+  return (target: any, key: PropertyKey) => {
+    Object.defineProperty(target, key, {
+      set: function(value) {
+        // No operation if new value is same as old value
+        if (!_isFirstChange && _cachedValue === value) {
+          return;
+        }
+        const oldValue = _cachedValue;
+        _cachedValue = value;
+        const simpleChange: SimpleChange<T> = {
+          firstChange: _isFirstChange,
+          previousValue: oldValue,
+          currentValue: _cachedValue,
+          isFirstChange: () => _isFirstChange
+        };
+        _isFirstChange = false;
+        callback.call(this, _cachedValue, simpleChange);
+      },
+      get: function() {
+        return _cachedValue;
+      }
+    });
+  };
+}

projects/ng-helpers/src/public_api.ts

@@ -6,6 +6,7 @@
  * Helpers
  */
 export * from './helpers/rx-destroy';
+export * from './helpers/on-change';
 
 /**
  * Directives

src/app/app.component.html

@@ -1 +1,7 @@
 <div *ngFor="let i of test; jpTrackByField:'pero'">{{i.id}}</div>
+
+<jp-on-changes [value]="onChangeValue"></jp-on-changes>
+
+<button (click)="changeOnChangeValue()">
+  Change value
+</button>

src/app/app.component.ts

@@ -1,10 +1,16 @@
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
 
 @Component({
-  selector: 'app-root',
+  selector: 'jp-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
   test = Array.from(Array(20).keys()).map(i => ({id: i, label: 'bla' + i}));
+
+  onChangeValue = Math.random();
+
+  changeOnChangeValue() {
+    this.onChangeValue = Math.random();
+  }
 }

src/app/app.module.ts

@@ -2,16 +2,12 @@ import {NgModule} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
 import {TrackByFieldModule} from '../../projects/ng-helpers/src/directives/track-by-field/track-by-field.module';
 import {AppComponent} from './app.component';
+import {OnChangesComponent} from './examples/on-changes/on-changes.component';
 
 @NgModule({
-  declarations: [
-    AppComponent,
-  ],
-  imports: [
-    BrowserModule,
-    TrackByFieldModule.defaultKey()
-  ],
+  declarations: [AppComponent, OnChangesComponent],
+  imports: [BrowserModule, TrackByFieldModule.defaultKey()],
   providers: [],
   bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {}

src/app/examples/on-changes/on-changes.component.html

@@ -0,0 +1 @@
+<span>{{value}}</span>

src/app/examples/on-changes/on-changes.component.ts

@@ -0,0 +1,15 @@
+import {Component, Input} from '@angular/core';
+import {OnChange} from '@jaspero/ng-helpers';
+
+@Component({
+  selector: 'jp-on-changes',
+  templateUrl: './on-changes.component.html',
+  styleUrls: ['./on-changes.component.scss']
+})
+export class OnChangesComponent {
+  @OnChange<number>(function(value, simpleChange) {
+    console.log(value, simpleChange);
+  })
+  @Input()
+  value: number;
+}

src/index.html

@@ -9,6 +9,6 @@
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
 <body>
-  <app-root></app-root>
+  <jp-root></jp-root>
 </body>
 </html>

src/tslint.json

@@ -1,17 +1,7 @@
 {
-    "extends": "../tslint.json",
-    "rules": {
-        "directive-selector": [
-            true,
-            "attribute",
-            "app",
-            "camelCase"
-        ],
-        "component-selector": [
-            true,
-            "element",
-            "app",
-            "kebab-case"
-        ]
-    }
+  "extends": "../tslint.json",
+  "rules": {
+    "directive-selector": [true, "attribute", "jp", "camelCase"],
+    "component-selector": [true, "element", "jp", "kebab-case"]
+  }
 }