CODEWITHSUNDEEP
angularionic-frameworkionic3
sam_v
sam_v

Reputation: 513

Ionic v3 - How to change button's "color"-attribute when clicked

Ionic v3

I'm viewing a list of notifications in my demo app.

List code (notifications.html)

  <ion-list>
    <button ion-item *ngFor="let post of posts" color="{{post.color}}" id="btn_{{post.item}}" (click)="readNotification(post.item)" >
      <ion-icon name="{{post.icon}}" item-start></ion-icon>
      <h2>{{post.title}}</h2>
      <p>{{post.content}}</p>
    </button>
  </ion-list>

I want to change the colour of the clicked item when clicked from "primary" to "light" if it is "primary" when clicked.

Now the click function calls "readNotification"-function and opens a new view to show the full message.

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.

UPDATE

Notifications.ts

export class NotificationsPage {
  posts: any;

  constructor(
    public navCtrl: NavController,
    public http: Http,
    private localNotifications:
    LocalNotifications
  ) {
    this.http.get('xxx?oper=getNotificationsJSON')
    .map(res => res.json())
    .subscribe(data => {
      this.posts = data.results;
    },
    err => {
      console.log("oops!");
    });
  }

  readNotification(item: string) {
    this.navCtrl.push(ReadNotificationPage, {
      id: item
    });
  }
}

Upvotes: 0

Views: 5259

Answers (3)

sam_v
sam_v

Reputation: 513

Changed click operation to readNotification(post) and now it is possible to change and edit the post item in readNotification-function.

Thanks for your help!

Notifications.html

  <ion-list>
    <button ion-item *ngFor="let post of posts" color="{{post.color}}" (click)="readNotification(post)" >
      <ion-icon name="{{post.icon}}" item-start></ion-icon>
      <h2>{{post.title}}</h2>
      <p>{{post.content}}</p>
    </button>
  </ion-list>

Notifications.ts

export class NotificationsPage {
  posts: any;

  constructor(
    public navCtrl: NavController,
    public http: Http,
    private localNotifications:
    LocalNotifications
  ) {
    this.http.get('xxx?oper=getNotificationsJSON')
    .map(res => res.json())
    .subscribe(data => {
      this.posts = data.results;
    },
    err => {
      console.log("oops!");
    });
  }

  readNotification(post) {
      post.color = 'light';
  }
}

Upvotes: 1

P.S.
P.S.

Reputation: 16392

All that you need is just to check in your function, does post.color has "primary" value, and if it is, then change the value to "light":

readNotification(): void {
  // do stuff with "post.item" and everything you want

  if (post.color === "primary") {
    post.color = "light"; // will change the color to "light" only if the current color is "primary"
  }
}

Upvotes: 0

S&#233;bastien
S&#233;bastien

Reputation: 12139

You seem to have all the pieces already.

You have a property that it used in your template to specify a color.

HTML

<button ion-button (click)="readNotification()" color="{{post.color}}">change color</button>

Then in your function all you have to do it modify the proprety

Page class

public post: any = {color: 'primary'};

public readNotification() {
    this.post.color = 'light';
}

Upvotes: 0

Related Questions