title: How to change color of mat-chips within a mat-chip-list programmatically?
body: <p>I am using the mat-chips for filtering a table and everything seems to work just fine:</p>
  
  <p><strong>home.html</strong></p>
  
  <pre><code>&lt;mat-chip-list&gt;
     &lt;mat-chip (click)="onSectorChipSelect(sector)" [color]="chipColor(sector)" *ngFor="let sector of sectors" selected&gt;{{sector}}&lt;/mat-chip&gt;
     &lt;mat-chip (click)="clearSectors()"&gt;
       Clear 
     &lt;/mat-chip&gt;
  &lt;/mat-chip-list&gt;
  </code></pre>
  
  <p><strong>home.ts</strong> adding the sectors to a list called filteredSectors which holds all the selected sectors at a time.</p>
  
  <pre><code>onSectorChipSelect(sector: string) {
   if (this.filteredSectors.includes(sector)) {
    this.filteredSectors.splice(this.filteredSectors.indexOf(sector), 1);
   } else {
    this.filteredSectors.push(sector);
   }
  }
  </code></pre>
  
  <p><strong>home.ts</strong> this method colors the chip blue (primary) if selected, otherwise it stays white (basic).</p>
  
  <pre><code>chipColor(sector: string) {
    if (this.filteredSectors.includes(sector)) {
      return 'primary';
    }
    return 'basic';
  }
  </code></pre>
  
  <p>the "problem" is that the method chipColor() is bound to the color attribute of the chip and therefore called several times when just scrolling or clicking around in the home component. My guess is that everytime the browser renders, the method is being called again? (i don't really know, maybe someone can explain?) </p>
  
  <p>There are around 20 sectors so it's not really a performance issue I guess? It's just annoying to know and not a good practice I think. But how can I change that?</p>
  
  <p>What I tried so far is setting the color of each chip to white (basic):</p>
  
  <p><strong>home.html</strong></p>
  
  <pre><code>&lt;mat-chip (click)="onSectorChipSelect(sector)" color="basic" *ngFor="let sector of sectors" selected&gt;{{sector}}&lt;/mat-chip&gt;
  </code></pre>
  
  <p><strong>home.ts</strong></p>
  
  <pre><code>  @ViewChild(MatChipList) chipList: MatChipList;
  </code></pre>
  
  <p>Getting the chipList with ViewChild annotation and then iterating over the chips and setting their color but this doesn't work. After selecting a second chip, the first chip gets a white color again.</p>
  
  <pre><code>onSectorChipSelect(sector: string) {
      if (this.filteredSectors.includes(sector)) {
        this.filteredSectors.splice(this.filteredSectors.indexOf(sector), 1);
      } else {
        this.filteredSectors.push(sector);
      }
  
      this.chipList.chips.forEach(chip =&gt; {
        if(this.filteredSectors.includes(chip.value)) {
          chip.selected = true;
          chip.color = 'primary';
        } else {
          chip.selected = false;
          chip.color = null;
        }
      });
  }
  </code></pre>