title: Ionic v3 - How to change button's "color"-attribute when clicked
body: <p>Ionic v3</p>
  
  <p>I'm viewing a list of notifications in my demo app.</p>
  
  <p>List code (notifications.html)</p>
  
  <pre><code>  &lt;ion-list&gt;
      &lt;button ion-item *ngFor="let post of posts" color="{{post.color}}" id="btn_{{post.item}}" (click)="readNotification(post.item)" &gt;
        &lt;ion-icon name="{{post.icon}}" item-start&gt;&lt;/ion-icon&gt;
        &lt;h2&gt;{{post.title}}&lt;/h2&gt;
        &lt;p&gt;{{post.content}}&lt;/p&gt;
      &lt;/button&gt;
    &lt;/ion-list&gt;
  </code></pre>
  
  <p><strong>I want to change the colour of the clicked item when clicked from "primary" to "light" if it is "primary" when clicked.</strong></p>
  
  <p>Now the click function calls "readNotification"-function and opens a new view to show the full message.</p>
  
  <p>Default color is specified in the ajax data. If the message is not readed, it will be displayed with "primary" color and if it is already read it will be displayed with "light" color.</p>
  
  <h3>UPDATE</h3>
  
  <p>Notifications.ts</p>
  
  <pre><code>export class NotificationsPage {
    posts: any;
  
    constructor(
      public navCtrl: NavController,
      public http: Http,
      private localNotifications:
      LocalNotifications
    ) {
      this.http.get('xxx?oper=getNotificationsJSON')
      .map(res =&gt; res.json())
      .subscribe(data =&gt; {
        this.posts = data.results;
      },
      err =&gt; {
        console.log("oops!");
      });
    }
  
    readNotification(item: string) {
      this.navCtrl.push(ReadNotificationPage, {
        id: item
      });
    }
  }
  </code></pre>