Trigger click event of button whose nearest textbox is focused

I have dynamic cards in the view. There is a text box on each card and a button next to it. I want to trigger click event of the button of that card whose text box is focused by "Enter Key". The cards shown in the picture. Also I am struggling in clearing the contents in the text box of the card selected.

I tried clearing contents of textbox using ViewChild

@ViewChild('bidamount') txtbidamount: ElementRef;

this.txtbidamount.nativeElement.value = '';


But with this approach only the textbox of the first card gets cleared.

2 Answers
2

Since your code generates multiple components, you should probably use 'ViewChildren' and 'QueryList' rather than the singular 'ViewChild'.

So write in card component using this:

@ViewChildren('bidamount') inputBidAmount: QueryList<ElementRef>;
getClickAmount(index, item)
console.log(index,this.inputBidAmount.toArray()[index])
console.log(this.inputBidAmount.toArray()[index])



In Html:

<div *ngFor="let item of items; let i =index">
<input type="text" id="'txt'+ item.id" #bidamount/>
<button (click)="getClickAmount(i, item)">Bid</button>
</div>


UPDATED Stackblitz
Trigger click event of button whose nearest textbox is focused

Hope this help you!!

also I am struggling in clearing the contents in the text box of the card selected.

Since you haven't provided any code here is some that will work:

id

me

before

document.getElementById('me').value = ''; // clear value

<input value="before" id="me"/>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.