title: Angular Material Checkbox doesn´t change state of checked
body: <p>I´m working with a list of element and filtering the list using pipes, the filter is multi-selection to filter using more than one value, i save the filter in the localstorage to have persistent in the filter after close the window or reload the page, in the <code>mat-checkbox</code> component i use i function in the <code>[checked]="existInArray(color.id, filterColor)"</code> directive to check the checkbox if the value is already in the filter array to check the checkbox, but i have a problem, if the checkbox is checked using the function, the next time i click the checkbox to uncheck it, the checkbox doesnt change the state of <code>checked true to false</code>, only when i clicked a second time change to <code>checked false</code></p>
  
  <p><strong>Template</strong></p>
  
  <pre><code>&lt;mat-checkbox *ngFor="let color of filterService.getFilter(filterType.FILTER_COLOR).items.ToArray() | filterQuery:filterOptions.color"
    [checked]="existInArray(color.id, filterColor)" class="filter-checkbox" [value]="color.id" [hidden]="color.id === '999999'"
    (click)="filterBy(filterType.FILTER_COLOR, color.id, filterColor)"&gt;
    &lt;div class="assigned"&gt;
      &lt;div class="assigned-avatar text-center" [ngStyle]="{ 'background-color': color?.color?.bgColor }"&gt;&lt;/div&gt;
      &lt;p class="assigned-name"&gt;{{ color.name }}&lt;/p&gt;
    &lt;/div&gt;
  &lt;/mat-checkbox&gt;
  </code></pre>
  
  <p><strong>Filter.ts</strong></p>
  
  <pre><code>  public existInArray(element, array: Array&lt;string&gt;): boolean {
      return array.indexOf(element) &gt; -1;
    }
  
    public filterBy(filterType: FilterTypeEnum, element: any, array: Array&lt;string&gt;) {
      this.toggleInArray(element, array);
      this.updateFilterObservable(filterType);
    }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/wEubO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wEubO.png" alt="enter image description here"></a></p>
  
  <p>Example, as you can see in the image, the checkbox is already checked by default because i use the <code>existInArray</code> function to check if the value of the check already exist in the filter array, if i try uncheck it, the first time doesn´t work, but when i click a second time the checkbox is unchecked, any idea what could be....?</p>
  
  <p>I think the reason is because the <code>[checked]</code> is trigger before i toggle the element from the array, but no idea so far idea how to solved.... any idea.</p>