Having trouble with my custom directive and ngOnChanges() not firing when changing a child property of the input.
my.component.ts
import {Component} from 'angular2/core';
import {MyDirective} from './my.directive';
@Component({
directives: [MyDirective],
selector: 'my-component',
templateUrl: 'Template.html'
})
export class MyComponent {
test: { one: string; } = { one: "1" }
constructor( ) {
this.test.one = "2";
}
clicked() {
console.log("clicked");
var test2: { one: string; } = { one :"3" };
this.test = test2; // THIS WORKS - because I'm changing the entire object
this.test.one = "4"; //THIS DOES NOT WORK - ngOnChanges is NOT fired=
}
}
my.directive.ts
import {Directive, Input} from 'angular2/core';
import {OnChanges} from 'angular2/core';
@Directive({
selector: '[my-directive]',
inputs: ['test']
})
export class MyDirective implements OnChanges {
test: { one: string; } = { one: "" }
constructor() { }
ngOnChanges(value) {
console.log(value);
}
}
template.html
<div (click)="clicked()"> Click to change </div>
<div my-directive [(test)]="test">
Looking for help on why ngOnChanges isn't firing in this scenario. Thanks!