Ionic enable/disable button programmatically when ion list is full/empty


#1

I have a searchbar for which I check for input events and then filter firebase data.
This is the html code:

<ion-searchbar (ionInput)="getItems($event)" placeholder="Add tag ... "></ion-searchbar>
<ion-list>
<ion-item *ngFor="let tag of tagList">
<h2> {{ tag.name }} </h2>
</ion-item>
</ion-list>

and this is the ts code:

getItems(searchbar) {
 // Reset items back to all of the items
this.initializeItems();

 // set q to the value of the searchbar
var q = searchbar.srcElement.value;

// if the value is an empty string don't filter the items
if (!q) {
return;
}

this.tagList = this.tagList.filter((v) => {
if(v.name && q) {
  if (v.name.toLowerCase().indexOf(q.toLowerCase()) > -1) {
    return true;
  }
  return false;
}
 });

}

This code works well, but now I would like to enable a button whenever the list loaded on the view is empty, while keeping it disabled when there’s at least one element loaded. The code for the button is this one:

  <button ion-button [disabled]="!isEnabled">Add tag</button>

I change the value of isEnabled to true or false in the getItems() method, this way:

if (this.tagList.length==0){
console.log('No elements ')
this.isEnabled=true;
  } else {
    console.log('Elements ')
    this.isEnabled=false;
  }

but the button remains disabled (when first entering the page, isEnabled is marked as false by default).
The logs are shown correctly when I write something in the searchbar, that is whenever I enter a letter the console outputs “elements” or “no elements” depending if the list has elements or not, but the button remains disabled.
How do I solve that? Am I missing something?