how to bind click event to a particular id of a div in a loop in angular2

Question

How to change text of id="itemid0" when id="buttonitemid0" is clicked?

app.component.ts
-----------------
   bb = 'cat';
changeText(index){

}
     app.component.html
    -----------------------------

        <div class="col-xs-2" *ngFor="let item of items;let k=index;">
        <div class="col-xs-12" id="itemid{{index}}">aa</div>
        <button type="button" id="buttonitemid{{index}}" (click)="changeText(index)">btnn</button>
    </div>

Günter Zöchbauer · Answer 1 · 2017-10-21T17:12:46.823

0

Just store the index in a field in the component and then bind to this field

app.component.ts

clickedIdx :number;
changeText(index){
  this.clickedIdx = index;
}

app.component.html

<div class="col-xs-2" *ngFor="let item of itmes"></div>
    <div class="col-xs-2" *ngFor="let item of items;let k=index;">
    <div class="col-xs-12" id="itemid{{index}}">aa</div>
    <button type="button" id="buttonitemid{{clickedIdx}}" (click)="changeText(k)">btnn</button>
</div>

edited Oct 21 '17 at 17:12

answered Oct 21 '17 at 16:47

Günter Zöchbauer

623,577
216
2,003
1,567

can you help this question https://stackoverflow.com/questions/46855627/how-to-show-hide-dynamic-id-of-divs-in-angular2/46856004?noredirect=1#comment80661323_46856004 – Manzer Hashmi Oct 21 '17 at 16:55
How to pass some other data to id="itemid0" eg;- bb when we click buttonitemid0. – Manzer Hashmi Oct 21 '17 at 16:58
I dont see any change in the question and your answer, as text is not changed id-itemid0 when corresponding buttonitemid0 is clicked. – Manzer Hashmi Oct 21 '17 at 17:07
Can you, please tell me how method changeText(index){ this.clickedIdx = index; } is changing text 'aa' to text 'bb' when corresponding button is clicked? Sorry, but its not working. – Manzer Hashmi Oct 21 '17 at 19:03
Where should `aa` or `bb` come from? Seems to be arbitrary. Honestly, I have no idea what the question is about. – Günter Zöchbauer Oct 21 '17 at 21:15
aa – Manzer Hashmi Oct 21 '17 at 21:18

how to bind click event to a particular id of a div in a loop in angular2

1 Answers1

app.component.ts

app.component.html