Retrieve the X,Y coordinates from a list in an HTML document

When a user inputs text to search for an element in a list, I want the page to scroll to that specific element. However, I am having trouble obtaining the X,Y position of the element in the list. Here is 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;
}

Answer №1

Employ the ViewChildren feature. When utilizing a template reference variable,

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

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

Within your search function

//Initially look for the index in the Array
const index=this.list.findIndex(x=>indexOf(word)>=0)
if (index>=0)
{
   //Locate the element with "index" in the QueryList
   const el=this.listDiv.find((_,i)=>i==index)
   console.log(el.nativeElement.getBoundingClientRect())
   //Another option is to use
   el.nativeElement.scrollIntoView()
}

NOTE: You can also utilize a template reference variable in your input like this

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

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is Angular missing support for HTML emojis?

I am attempting to incorporate HTML emoji characters into an Angular project. In my component: @Component({ selector: "mycomp", template: ` <p>I will display &#x1F396;</p> <p style="font-family: Arial;">I will dis ...

Encountering issues with building NX Angular Storybook

Following the execution of nx migrate, our Storybook stories are encountering build errors such as: Error: Cannot find module '@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs' ERR! at Function.Module._resolveFilenam ...

How can a material progress spinner be inserted into the Angular Ag-Grid overlayNoRowsTemplate?

I'm attempting to include a mat-progress-spinner within my agGrid when there are no rows to display. Here's an example that works: private overlayNoRowsTemplate = '<p>No rows to show.</p>'; However, when I attempt to add ...

ESLint is notifying that the prop validation for ".map" is missing, with the error message "eslint react/prop-types" occurring in a Typescript React environment

Hey everyone, excited to be posting for the first time! Currently, I'm working on a small project using Typescript and React. I've run into an issue with ESLint where it doesn't recognize that a prop variable of type string[] should have a ...

Angular Throws 'Expression Changed After Check' Error When Behavior Subject is Triggered

In my Angular 11 project, I am utilizing a BehaviorSubject to update the toolbar content from various components. The toolbar subscribes to the BehaviorSubject in the following manner: <breadcrumbs [crumbs]="messageService.getBreadcrumbs() | async& ...

The variable type 'editor.IStandaloneCodeEditor' does not match the parameter type 'monaco.editor.IStandaloneCodeEditor'

After installing the "monaco-editor" package using the command npm i monaco-editor, I encountered a type error in my source code. Can someone help me understand why this error is happening and how I can resolve it? This is the package file content: { "p ...

What is the best way to implement conditional CSS?

My current project involves a component called item, which represents a card displaying information about the item. All cards follow the same basic structure, showing categories like price, color, size, and photo. However, I am interested in applying condi ...

Collaborative service utilization in Angular 2

My goal is to create a shared service for my app. import { Injectable } from '@angular/core'; @Injectable() export class SharedService { testService() { console.log('share!'); } } However, when I attempt to inject this shared ...

Issue: Typescript/React module does not have any exported components

I'm currently facing an issue with exporting prop types from one view component to another container component and using them as state type definitions: // ./Component.tsx export type Props { someProp: string; } export const Component = (props: ...

Error in Angular 2 (CLI) Routing: Unable to process (Error reading property 'split' of undefined)

What could be the reason why routing is only working for the first imported component after AppComponent (for example, "PageNonFound")? I also encountered an error after implementing routing in my project. Error Error in ./AppComponent class AppComponent ...

Encountered an error while trying to access the 'touched' property of undefined within Angular6 reactive forms

When attempting to validate my page, I encountered an error stating 'Cannot read property 'touched' of undefined'. Can someone please assist me with this code? Also, feel free to correct any mistakes you may find. Here is the HTML code ...

How to conditionally make a property optional in Typescript depending on the value of another property

I'm a newcomer to Typescript and I've encountered a scenario that has been difficult for me to find a solution for. Any suggestions would be greatly appreciated. My goal is to have the property options be optional when the type is either SHORT_T ...

Should the RxJS interval() function be employed to receive live server updates?

In my Angular application, I implemented this code to continuously check for updates. export class RealTimeComponent { products$:any; constructor(private service: ProductService){} ngOnInit(){ this.products$ = interval(5000) .pipe( ...

The specified property cannot be found in the type 'IntrinsicAttributes & ...'

I'm currently working on adding a custom prop to a custom styled-component: interface Props { image?: string; title?: string; subtitle?: string; background?: string; } export function CardWide({ image, title, subtitle, background }: Props) ...

Stop the scrolling behavior from passing from one element to the window

I am facing an issue with a modal box window that contains an iframe. Inside the iframe, there is a scrollable div element. Whenever I try to scroll the inner div of the iframe and it reaches either the top or bottom limit, the browser window itself start ...

Avoid obtaining cookies within the TRPC environment

Recently, I've been setting up TRPC with Next.js and attempting to implement server-side rendering where I fetch user data before the page loads using the trpc.useQuery hook. However, I'm facing an issue where I cannot access the JWT token cookie ...

Tips for Effectively Declaring a Variable with React's useState

How should I correctly specify variable types in useState? In the code below, the value for alert must be either "success","warning", "error", or "info" const [alertValue, setAlertValue] = useState("error" ...

Find all objects in an array that have a date property greater than today's date and return them

I have an array of objects with a property called createdDate stored as a string. I need to filter out all objects where the createdDate is greater than or equal to today's date. How can this be achieved in typescript/javascript? notMyScrims: Sc ...

Angular2 plugin for redacting content

I'm attempting to integrate Redactor with additional plugins, but I'm encountering an issue where the counter plugin displays 0 words and 0 characters after the page has loaded. { words: 0, characters: 0, spaces: 0 } To address this pro ...

Incompatibility with semantic versioning and npm versions 5 and higher

Could you explain the necessity of using NPM 5 or later to prevent issues with semantic versioning? How does the package-lock.json file help in avoiding this problem? Would using the same package.json file on all development machines for a project also r ...