title: Angular input setter triggering only once
body: <p>I want to preface the question saying I have already read and understood other potentially duplicate questions (such as <a href="https://stackoverflow.com/questions/48955427/angular-input-getter-setter-and-non-primitive-values" title="Angular @Input getter/setter and non-primitive values">this one</a>) and have been unable to make this work leading me to believe that the problem is a little different in nature or I misunderstood something.</p>
  
  <p><strong>The context:</strong> I have a parent component with two child components (a side menu and a main view). The side menu has some filters in the form of checkboxes bound to an object via <code>[(ngModel)]</code> and trigger an event using <code>(ngModelChange)="changeFilter()"</code> within the template.</p>
  
  <p>In the parent component I catch the event: <code>(filter)="updateFilters($event)"</code>. This function changes a public filter variable which I then pass along to the other child component like this: <code>[filterObject]="filters"</code></p>
  
  <p>In the main view component I feed the filterObject variable to a pipe in order to filter an array of objects.</p>
  
  <p><strong>The problem:</strong> The pipe gets called only once, after I changed the filter for the first time. The filterObject variable inside the main view shows up correctly updated when shown like this <code>{{filterObject | json}}</code> but the setter is never called. Console logs put in the setter and getter show that only the getter is getting access (2-4)</p>
  
  <p><strong>Solutions I've tried:</strong> </p>
  
  <ul>
  <li><p>Adding an additional parameter to the pipe to trigger it. The problem with this approach is that setting a new date needs to be done from the setter for <code>filterObject</code> which doesn't get called - as stated above</p></li>
  <li><p>Making the pipe impure (works but not a really good solution as it makes it process very big arrays of complex objects 2-4 times per click)</p></li>
  <li><p>Making the parent update the filter variable, not through an assignment operator, but through <code>Object.assign</code> in order to change the reference and potentially trigger the setter</p></li>
  </ul>
  
  <p><strong>Solutions I'm considering:</strong> If I don't manage to figure out what the problem is I'm thinking of making a service to communicate between the two components via observers. Otherwise I might have to settle for an impure pipe with some custom change detection embedded (I'm thinking of converting the filter object to a JSON string and checking the length).</p>
  
  <p><strong>side-menu-component.html</strong></p>
  
  <pre><code>&lt;input type="checkbox" id="filter-type-2" name="filter-type-2" [(ngModel)]="filterObject.type.me" (ngModelChange)="changeFilter()"&gt;
  </code></pre>
  
  <p><strong>side-menu-component.ts</strong></p>
  
  <pre><code> @Output() filter = new EventEmitter();
   public filterObject = {
      type: {
          mo: true,
          me: true,
          ar: true,
          cto: true,
          gl: true,
          dl: true
      },
      status: {
          unreviewed: true,
          approved: true,
          other: true
      }
  };
  
  // ...
  
  changeFilter() {
      this.filter.emit(this.filterObject);
  }
  </code></pre>
  
  <p><strong>parent-component.html</strong></p>
  
  <pre><code>&lt;aside&gt;
       &lt;app-article-view-aside [article]="article" (close)="closeModal($event)" (filter)="updateFilters($event)"&gt;&lt;/app-article-view-aside&gt;
  &lt;/aside&gt;
  &lt;div class="articleContainerMainView"&gt;
       &lt;app-article-view-main [article]="article" [filterObject]="filters"&gt;&lt;/app-article-view-main&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>parent-component.ts</strong></p>
  
  <pre><code>updateFilters(newFilter) {
      this.filters = newFilter;
  }
  </code></pre>
  
  <p><strong>main-view-component.html</strong></p>
  
  <pre><code>&lt;app-finding
          *ngFor="let finding of findings | findingsFilter:filterDate:filterObject; let i = index"
          [finding]="finding"&gt;&lt;/app-finding&gt;
  </code></pre>
  
  <p><strong>main-view-component.ts</strong></p>
  
  <pre><code>@Input() set filterObject(filterObject) {
      console.log('setter');
      this._filterObject = filterObject;
      this.filterDate = Date.now();
  }
  
  get filterObject() {
      console.log('getter');
      return this._filterObject;
  }
  
  private _filterObject = {};
  
  public filterDate = Date.now();
  </code></pre>
  
  <p><strong>console output when first displaying the page:</strong></p>
  
  <pre><code>setter
  getter
  getter
  getter
  getter
  </code></pre>
  
  <p>I really want to do it "The Angular Way" so my question to you is what am I missing here?</p>