I have a scenario where I have multiple components running inside *ngFor on the same page. My goal is to create button links at the top of the page that, when clicked, will scroll to the corresponding component on the page.
Below are the code snippets that I am currently working with:
In the HTML file:
<button (click)="scroll(target)"></button>
<div #target>Your target</div>
And in the TypeScript file:
scroll(el: HTMLElement) {
el.scrollIntoView();
}
However, I am unsure of how to reference each individual component's selector.
Here is a snippet of my code without implementing the above functionality yet:
// There will be many buttons to link to each of the components.
<button type="button" (click)="scroll()">Click this button to navigate</button>
<div *ngFor="let appdata of appData">
<app-details [value]="appdata"></app-details>
</div>
The 'appdata' variable is a JSON object containing attributes like appID (which could be used to uniquely identify each component), title, description, etc.
Please provide guidance on how I can reference the components and possibly suggest an implementation strategy. Thank you!