SOLVED: How introduce an id with index inside a click event in angular // ionic

Issue

I am developing an apk with ionic, in my case I need to send the tag value which has an id with an index. I need to send the id with index in the click event to know which element is provoking this event inside a ngFor.

<ion-row *ngFor="let item of lines; let i= index" [value]="item" >
    <ion-col>         
        <ion-row>      
          <ion-col size="3" class="centered">
            <ion-item class="ion-no-padding">    
              <ion-input type="number" id="{{'cant_'+i}}" class="font_mini centered alignright" (input)="onChangeCantidad(i, $event.target.value)"></ion-input>
            </ion-item>
          </ion-col>
          <ion-col size="1" class="centered">
              <ion-checkbox id="{{'checkboxLine_'+i}}" checked="false" (click)="checkEvent($event, item, i, [{{'cant_'+i}}].value)"></ion-checkbox>
          </ion-col>
        </ion-row>
    </ion-col>
  </ion-row>

The code above send me error because of click event of checkevent.

There is some way to include [{{'cant_'+i}}].value inside a click event, for me is very important to manage the index in each element.

Edit:

With NgModel model is a good way to save the values of every index, but my problem is about how to get the especific reference of the tag with an specefic index, for example for an input I want to get his placeholder, but with the reference # is generalistic and I can not match the exact index when it will be required.

SOLUTION:

Thanks to @Eliseo 's explanation I have solved my problem:

• To access to the values and change it dynamically it is easier using NgModel

• To access to other attributes of my elements inside the ngFor I have do it using the following in my ts (in this case the properties that I need are inside the tag's son):

   let element = document.getElementById('cantidadLine_'+index).getElementsByTagName('input')[0];
  
   let content = element.getAttribute("placeholder"));
  

Edit:

Also [(ngModel)] brin me some problems, because the value do not update when I press some key, the first time the value of my listCant[i] was undefined. By this reason I have to solve this using the following solution:

[ngModel]="listCant[i]" (ngModelChange)="onRepetitionChange(index, $event)"

src: Default value of select when ngModel is undefined

Thanks. TY @Eliseo

Solution

when you use (event)="what-ever" you don't use interpolation inside the quotes

But something like:

//WRONG
(click)="checkEvent($event, item, i, this['cant_'+i].value)

Ask about a variable "cant_#" in your .ts

You can use a template reference variable and don't afraid about the "scope"

<ion-row *ngFor="let item of lines; let i= index" [value]="item" >
    ...
              <!--see the "#cantID"-->
              <!--that you use also as argument to the function-->
              <ion-input #cantID type="number" id="{{'cant_'+i}}" 
class="font_mini centered alignright" 
                   (input)="onChangeCantidad(i, cantID.value)"></ion-input>
            ...

              <!--that you use also as argument to the function-->
              <ion-checkbox id="{{'checkboxLine_'+i}}" checked="false" 
                 (click)="checkEvent($event, item, i, cantID.value)">
              </ion-checkbox>
          ...
  </ion-row>

BTW: Why not use [(ngModel)]? Angular was make to make easy a binding between variables in .ts and .html

Update Aclaration:

When you use the template reference variable as argument in a function in .html give you the "htmlElement" (I'm not pretty sure if in ionic give "htmlElement" or the ElementRef and you need use in function el.nativeElement). When the template reference variable is under a loop you don't need take care about: Angular has a "scope" and know the element you pass.

E.g.

(click)="checkEvent($event, item, i, cantID)"

checkEvent(event:any,item:any,index:number,el:HTMLElement)
{
   console.log(el.value,el.getAttributte('placeholder')
}

NOTE: when I say that I'm not prety sure if in ionic pass the ElementRef, I want to say that perhafs

checkEvent(event:any,item:any,index:number,el:ElementRef)
{
   console.log(el.nativeElement.value,el.nativeElement.getAttributte('placeholder')
}

Answered By - Eliseo