CODEWITHSUNDEEP
angulartypescriptionic2ionic3
Usr
Usr

Reputation: 2838

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

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?

EDIT: here's the code where I set isEnabled :

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;
  this.textSearch = q;

  // 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;
   }
 });

 if (this.tagList.length==0){
   this.isEnabled = true;
 } else{
   this.isEnabled = false;
 }
}

Upvotes: 9

Views: 21728

Answers (2)

sebaferreras
sebaferreras

Reputation: 44659

As we talked about in the comments, please edit your post to include the entire method where you set the isEnabled property so we can figure out what could be going on, but in the meantime, replace

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

by

<button ion-button [disabled]="tagList && tagList.length > 0">Add tag</button>

or what would be equivalent by using the elvis operator:

<button ion-button [disabled]="tagList?.length > 0">Add tag</button>

Upvotes: 16

Gabriel Barreto
Gabriel Barreto

Reputation: 6421

You can disable it checking the array length

<button ion-button [disabled]="tagList.length > 0">Add tag</button>

With this code you'll need to initiate the variable when declaring it, or it'll throw an error, when declaring do

public tagList: any[] = [];

With this you can remove the isEnabled variable and the piece of code whose checks if it has items or don't.

Hope this helps :D

Upvotes: 0

Related Questions