How to change color of button text in popover in ionic 4

Question

I am trying to change the text color on the button when the user has made the selection from a popover, so that when the user opens the popover again the previous selection is highlighted...It's for a filter list, user selects filter values desc or asc or by name, etc.

in my html file I have 3 buttons:

<ion-button class="btn1" (click)="sortList('Desc', 'secondary')" fill="clear" [color]="(colorSelect==='secondary')"? 'secondary':'tertiary'">Desc</ion-button>
<ion-button class="btn2" (click)="sortList('Desc', 'secondary')" fill="clear" [color]="(colorSelect==='secondary')"? 'secondary':'tertiary'">Desc</ion-button>
<ion-button class="btn3" (click)="sortList('Desc', 'secondary')" fill="clear" [color]="(colorSelect==='secondary')"? 'secondary':'tertiary'">Desc</ion-button>

in my Component file:

colorSelect: string = '';

public sortList(sortType, item: string){
    this.popoverController.dismiss(sortType);
    this.colorSelect = item;
}

How would you keep that item selected after the popover has closed so that when the popover is opened again, the item would be hightlighted?

Answer 1

Since popover uses a component that gets destroyed after popover is closed you need to leverage a service that popover component can import and use as source of truth for the button colors.

Very roughly: https://stackblitz.com/edit/ionic-angular-v5-xfe357

At a high level:

service.ts:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class SharedService {

  public filters;

  constructor() {
    this.filters = ["secondary","secondary","secondary"]
  }

}

popover.ts:

import { Component } from '@angular/core';
import { PopoverController } from '@ionic/angular';
import { SharedService } from './shared.service';

@Component({
  selector: 'hello',
  template: `<h1>Hello!</h1>
  <ion-list>
      <ion-button class="btn1" (click)="sortList(0, 'Desc', 'secondary')" fill="clear" [color]="sharedService.filters[0]">Desc</ion-button>
      <ion-button class="btn2" (click)="sortList(1, 'Desc', 'secondary')" fill="clear" [color]="sharedService.filters[1]">Desc</ion-button>
      <ion-button class="btn3" (click)="sortList(2, 'Desc', 'secondary')" fill="clear" [color]="sharedService.filters[2]">Desc</ion-button>
  </ion-list>
  `
})
export class HelloComponent  {

  constructor(private sharedService: SharedService, private popoverController: PopoverController) {

  }

  sortList(buttonIndex, sortType, item: string){
    if (this.sharedService.filters[buttonIndex]==="secondary") {
      this.sharedService.filters[buttonIndex]="tertiary";
    } else {
      this.sharedService.filters[buttonIndex]="secondary";
    }
    this.popoverController.dismiss(sortType);
  } 
}

So your main component from which you call popover should also import such service (and inject it) and leverage data from it as single source of truth.