Get position X,Y from list from html-CodePudding

I have input text that user can search element and I have list, I would like to scroll to the element from this list when user put it but I can't get the position X,Y for the specific element in the list, this my code

<input type="text" (change)="search(event)">
<div *ngFor="let item from list">
{{item.lib}}
</div>

search(event:any){
let itemSearch = event.target.value;
this.list = this.list.filter((val)=>{
if(val.lib.indexOf(itemSearch)>=0){
let scrollY= val.lib.indexOf(itemSearch);
if(scrollY !==-1){
document.querySelector('.scroll')?.scroll (0,Scroll);
}
}
)};
This.list;
}

CodePudding user response：

Use ViewChildren. If you use a template reference variable

<div #divItem *ngFor="let item from list">
{{item.lib}}
</div>

@ViewChildren('divItem') list:QueryList<ElementRef>

In your function search

const index=this.list.findIndex(x=>indexOf(word)>=0)
if (index>=0)
{
   const el=this.list.find((_,i)=>i==index)
   console.log(el.nativeElement.getBoundingClientRect())
}

NOTE: You can use also a template reference variable in your input in the way

<input #input type="text" (input)="search(input.value)">

search(word:string){
   ....
}

CodePudding user response：

If you have a selector for that element, you could probably use the scrollIntoView function documented here.

An implementation like this can be found for angular in this answer here: How to call scrollIntoView on an element in angular 2