title: How to update the style of all the items which are iterated using *ngFor in Angular
body: <p>How do I apply style to all the items in the list which are iterated using <code>*ngFor</code> when clicked on a button which is outside the list.</p>
  
  <pre><code>&lt;button (click)="markAllAsChecked();"&gt;Mark All as Checked&lt;/button&gt;
  &lt;ion-list&gt;
    &lt;div *ngFor="let item of items"&gt;
      &lt;ion-item (click)="this.item.checked = !this.item.checked;"&gt;
        &lt;div class="item" [ngStyle]="{background: item.checked ? 'green': 'red'}"&gt;
          {{item.name}}
        &lt;/div&gt;
      &lt;/ion-item&gt;
    &lt;/div&gt;
  &lt;/ion-list&gt;
  </code></pre>
  
  <p>I wanted all the items background color to be turned to green when clicked on <em>Mark All as Checked</em> button. </p>
  
  <p>I created a <a href="https://stackblitz.com/edit/ionic-r7uve7?file=pages%2Fhome%2Fhome.html" rel="nofollow noreferrer">working example</a> using Stackblitz. Could anyone please help?</p>