title: Watch changes in component variable Angular 5
body: <p>In AngularJS it was possible to <code>$watch</code> a variable in a controller, and this trigger was activated if the variable was changed from anywhere (from template when ng-model changed or programmatically, from controller).</p>
  
  <p>I'd like to know if it's possible to accomplish the same functionality in Angular 5.</p>
  
  <p>I must be able to change my variable directly from my template, without calling any functions, like this:</p>
  
  <pre><code>&lt;button class="btn-link bc-2th" (click)="persistentComponentConfig.searchFiltersVisible = !persistentComponentConfig.searchFiltersVisible"&gt;
    FILTERS
  &lt;/button&gt;
  </code></pre>
  
  <p>But also I have to change it programmatically:</p>
  
  <pre><code>updateVariable () {
    this.persistentComponentConfig.searchFiltersVisible = !this.persistentComponentConfig.searchFiltersVisible
  }
  </code></pre>
  
  <p>In both cases (there are many, actually), I have to trigger another function after the model changes.</p>
  
  <p>I was able to do it by creating a reactive form and subscribing to it's 'valueChanges' property, but I don't need an entire form controller, I just need some properties to be stored in a component object to control some template *ngIf/hide/show directives and dispatch the changes to my <code>ngrx</code> store.</p>
  
  <p>I tried to create it using Observables and BehaviorSubjects, but more boilerplate was needed to propagate all changes to my store through 'next()'. I'm just looking for something identical to AngularJS's <code>$watch</code> functionality.</p>
  
  <p>How could I do it?</p>
  
  <p>Thanks!</p>