Popover items with checked icon near the selected one

Ionic Framework ionic-v3
1

Hi,

Inside the navbar I have the following

<button ion-button icon-only (click)="showSortOptions($event)">
    <ion-icon name="resize"></ion-icon>        
</button>

in the ts I have the following

showSortOptions(event) {
    let popover = this.popoverCtrl.create(ItemPopover);
    popover.present({
      ev: event
    });
}

inside ItemPopover

@Component({
    template: `
      <ion-list>
        <ion-list-header>Sort</ion-list-header>
        <button ion-item (click)="sortByName()"><ion-icon *ngIf="nameSorted" name="checkmark"></ion-icon>By name</button>
        <button ion-item (click)="sortByDate()"><ion-icon *ngIf="!nameSorted" name="checkmark"></ion-icon>By date</button>
      </ion-list>
    `
  })
  export class ItemPopover {
    constructor(public viewCtrl: ViewController, private storage: Storage) {}

    sortByName() {
      this.viewCtrl.dismiss();
    }

    sortByDate() {
        this.viewCtrl.dismiss();
    }
    //option 1
    nameSorted() {
        return new Promise((resolve, reject) => {
            this.storage.get("itemSortByName").then(result => {
                resolve(result && result === true)
            }).then((response) => {
               return response;
            });
        });      
    }    
    //option 2
    nameSorted() {
        this.storage.get("itemSortByName").then(result => {
           return (result != null && result == true);
        });        
    }    

}

The check icon should be visible near the selected item based on the nameSorted function. The function should wait for the storage.get to finish and then return the result.

I posted 2 options I tried but both didn’t work, it seems that it always returns true as if it doesn’t wait for it to finish. The check icon appears on the first item even though I expect it to be on the second item. How can this be implemented? Thanks

2

Found the solution
I added public isByName: boolean = true;

and

nameSorted() {
      this.storage.get("itemSortByName").then(result => {
          this.isByName = (result != null && result === true);
      });                  
    }

and in the html

        <button ion-item (click)="sortByName()"><ion-icon *ngIf="isByName" name="checkmark"></ion-icon>By name</button>
        <button ion-item (click)="sortByDate()"><ion-icon *ngIf="!isByName" name="checkmark"></ion-icon>By date</button>