title: Change the background color of an image which is showed by ngFor bucle
body: <p>I've done a request to Itunes Api to show the results of the database. The request is with and input, where I can write a word and the Api returns me all the music/tracks/artists/albums which match with that word.</p>
  
  <p>With all of this I've to show the information (which has sent inside and ARRAY) in a component, so I've get show them using ngFor (in this case with cdkVirtualFor, because all information must will be inside a scroll bar) . The problem is that in mi html there are only an article with a single title, a single trackname, a single albumname, and a SINGLE IMAGE for mark as a favourite. So, when the bucle is activated Angular travels into array and show all the data which I request, and generate a X number of articles, with diferent trackname, titlename. But at the end, Angular takes the image which marks as favourite and make a copy of a copy of a copy of it, repeating it.</p>
  
  <p>So, when I try to select only a image clicking on it, all the images of the other articles are selected. I need to select and change the color of the only image that I click, not the other ones. But i don't know how I can do...</p>
  
  <p>component.html</p>
  
  <pre><code>&lt;cdk-virtual-scroll-viewport itemSize="100px" class="container"&gt;
    &lt;div id="carusel" fxLayout="row wrap" fxLayout.lt-sm="column" fxLayoutGap="32px" fxLayoutAlign="flex-start"&gt;
        &lt;mat-card *cdkVirtualFor="let result of dataUltima; let i = index" fxFlex="0 1 calc(33.3% - 32px)" fxFlex.lt-md="0 1 calc(50% - 32px)" fxFlex.lt-sm="100%" id="{{result.trackId}}"&gt;
            &lt;img mat-card-image id="artwork" src="{{result.artworkUrl100}}"/&gt;
              &lt;div&gt;
                &lt;span&gt;&lt;h2&gt;{{result.trackName}}&lt;/h2&gt;&lt;/span&gt;
              &lt;/div&gt;
              &lt;div&gt;
                &lt;span&gt;&lt;h3&gt;{{result.collectionName}}&lt;/h3&gt;&lt;/span&gt;
              &lt;/div&gt;
              &lt;div&gt;
                &lt;img id="{{result.trackId}}" class="heart" src="../../../assets/img/heart-inline.png" [ngClass]="{'active': state, 'inactive': !state}" (click)="changeState()"&gt;
              &lt;/div&gt;
        &lt;/mat-card&gt;
    &lt;/div&gt;
  &lt;/cdk-virtual-scroll-viewport&gt;
  </code></pre>
  
  <p>component.ts</p>
  
  <pre><code>import { Component, OnInit, Input, ChangeDetectionStrategy } from '@angular/core';
  import {DataShareService} from '../../services/dataShare/data-share.service';
  
  @Component({
    selector: 'catalog',
    templateUrl: './catalog.component.html',
    styleUrls: ['./catalog.component.sass'],
    changeDetection: ChangeDetectionStrategy.OnPush
  })
  export class CatalogComponent implements OnInit {
    @Input() public dataUltima: any[]=[]; // inside here there are the data array from Itunes
    public state: boolean;
    public text: string;
    public heartId: any;
  
    constructor(private _dataShareService: DataShareService) {
      this.state = false;
      this.text = "inactive";
  
    }
  
    ngOnInit() {
  
    }
  
    changeState(){ // this is the function which changes the state
      this.text = (this.state) ?  "inactive" : "active";
      this.state = !this.state;
    }
  
  }
  </code></pre>