title: How to listen for value changes from class property TypeScript - Angular
body: <p>In AngularJS, we can listen variable change using <code>$watch</code>, <code>$digest</code>... which is no longer possible with the new versions of Angular (5, 6).</p>
  
  <p>In Angular, this behaviour is now part of the component lifecycle.</p>
  
  <p>I checked on the official documention, articles and especially on <a href="https://stackoverflow.com/questions/48446270/angular-5-change-detection-on-mutable-objects">Angular 5 change detection on mutable objects</a>, to find out how to listen to a variable (class property) change in a <a href="https://www.typescriptlang.org/docs/handbook/classes.html" rel="noreferrer">TypeScript class</a> / <a href="https://angular.io/" rel="noreferrer">Angular</a></p>
  
  <p>What is proposed today is : </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { OnChanges, SimpleChanges, DoCheck } from '@angular/core';
  
  
  @Component({
    selector: 'my-comp',
    templateUrl: 'my-comp.html',
    styleUrls: ['my-comp.css'],
    inputs:['input1', 'input2']
  })
  export class MyClass implements OnChanges, DoCheck, OnInit{
  
    //I can track changes for this properties
    @Input() input1:string;
    @Input() input2:string;
    
    //Properties what I want to track !
    myProperty_1: boolean
    myProperty_2: ['A', 'B', 'C'];
    myProperty_3: MysObject;
  
    constructor() { }
  
    ngOnInit() { }
  
    //Solution 1 - fired when Angular detects changes to the @Input properties
    ngOnChanges(changes: SimpleChanges) {
      //Action for change
    }
  
    //Solution 2 - Where Angular fails to detect the changes to the input property
    //the DoCheck allows us to implement our custom change detection
    ngDoCheck() {
      //Action for change
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is only true for <code>@Input()</code> property ! </p>
  
  <p>If I want to track changes of my component's own properties (<code>myProperty_1</code>, <code>myProperty_2</code> or <code>myProperty_3</code>), this will not work.</p>
  
  <p>Can someone help me to solve this problematic ? Preferably a solution that is compatible with Angular 5</p>