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?