title: Angular 6 change colors sequentially when (click) the div generated with *ngFor
body: <p>I have a color-array with different <code>colors[]</code>. What I want is to change the <code>background-color</code> of the div sequentially according to the colors inside the <code>Array</code>, when user clicks on it. So far I get the random color from the <code>Array</code> instead of sequential color and it changes the colors of all <code>div</code>s instead of changing the selected div.</p>
  
  <pre><code>&lt;div *ngFor="let item of items; index as i" [style.background-color]="changeColour()"  (click)="changeColour()"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>component.ts</p>
  
  <pre><code>changeColour() {
    this.ranCl = this.colorarray[Math.floor(Math.random() * this.colorarray.length)];
    return (this.ranCl);
  }
  </code></pre>