Function inside ionic icons not working

Ionic Framework ionic-v3
1

I’m trying to scan barcode by clicking barcode icon inside input field ,but it’s not working ,when i place the function in button only without icon then works perfectly.

%5E1F1D6DC761202CD746B61DEFFEE028D209C44348CF25FB4F34%5Epimgpsh_fullsize_distr


<ion-item *ngIf='item.type == "barcode"'>
         <ion-label  floating><b>{{item.label}}</b></ion-label>
             <button item-right clear (click)='scanBarCode(item.key)'>
                 <ion-icon name="barcode"></ion-icon>
             </button>
           <ion-input type="text" (ngModel)= "formssdata[index].key" name={{item.key}} value={{item.value}} ></ion-input> 
        </ion-item>

TS

 scanBarCode(key) {
    this.barcodeScanner.scan().then(barcodeData => {

      for(var i=0;i<this.formssdata.length;i++){

        if(this.formssdata[i].key == key){
         
           this.formssdata[i].value = barcodeData.text;
           break;

       }
    }

    }, (err) => {
        console.log('Error: ', err);
    });
  }
2

Did you try :

<button item-right clear >
       <ion-icon name="barcode" (tap)='scanBarCode(item.key)'></ion-icon>
</button>
1 Like
3

because ion-icon doesn’t support click event

4

that’s i konw…i placed the icon inside the button tag and function (click )placed inside the button…

5

A couple of notes:

  • it’s generally safer to get in the habit of quoting all your attributes, because the rules for what must be quoted are a bit arcane
  • item-right is deprecated. use item-end instead
  • (ngModel) doesn’t make much sense; you probably want [(ngModel)] instead
  • you might want to try putting ion-button on your buttons, as I have a fairly similar structure in which the icon buttons do work:
<ion-item>
<ion-input [placeholder]="bite.flavor.label"
           [(ngModel)]="bite.details.description">
</ion-input>
<button ion-button item-end color="secondary" (click)="managePhotos(bite)">
   <i class="fal fa-camera fa-2x"></i>
</button>
<button ion-button item-end color="secondary" (click)="remove(i)">
   <i class="fal fa-trash-alt fa-2x"></i>
</button>
</ion-item>
1 Like