ngFor scrolls first before scrollIntoView

I currently have a method like this:

public addDataset() {
    const map = this.generateMap();
    this.datasets.push(new Stammdatensatz(map, 0));
    this.addButton.nativeElement.scrollIntoView();
  }

(I recently discovered Renderer2 and plan to update this code later)

The this.datasets is being rendered with an ngFor. I'm trying to make the site scroll to a specific element when this method is executed, but it's not working as expected. It seems like the page scrolls before the new dataset is displayed, because when I comment out the two lines above, it scrolls correctly.

Any suggestions on how to fix this issue?

angulartypescript

Answer №1

When you specifically desire to scroll once ng-for has been assessed, consider delaying the code execution by one tick:

setTimeout(() => this.addButton.nativeElement.scrollIntoView());

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

What specific data type is required for the following code in Angular?

const componentMapper = { input: InputComponent, button: ButtonComponent, select: SelectComponent, date: DateComponent, radiobutton: RadiobuttonComponent, checkbox: CheckboxComponent, switch: SwitchComponent, textarea: TextAreaComponent }; ...

javascriptangulartypescripttypes

Can anyone provide guidance on incorporating the Here Geocoding and search API with an API key into an Angular service?

I am a beginner with Angular and I am looking to integrate the Here Geocoding API into my Angular service. I have added my apiKey to the httpParams but unfortunately, it is not working as expected. Below is the code snippet from my service: let params ...

angularhere-api

Protractor experiencing difficulty recognizing Angular functionality

Recently, I made the switch to using Protractor for running end-to-end tests on my Angular application. However, the e2e tests have suddenly started failing because Protractor is unable to detect Angular on the website. I raised this issue in their GitHub ...

angulartypescriptprotractor

Angular2 with Webpack causes duplication of styles in the header

I'm currently working on integrating Angular2 with universal + webpack, but I have encountered an issue where styles are being loaded twice in the head element. I haven't made any changes to the git repo that I forked from. You can find it here: ...

angularwebpack

Is there a specific instance where it would be more appropriate to utilize the styled API for styling as opposed to the sx prop in Material-

I am currently in the process of migrating an existing codebase to Material UI and am working towards establishing a styling standard for our components moving forward. In a previous project, all components were styled using the sx prop without encounteri ...

reactjstypescriptmaterial-uistyled-components

Tips for verifying the input field with specific requirements in Angular 6

There is an input field that needs to validate text based on certain logic conditions: No spaces should be allowed in the formula. The operators (and,or) must be lowercase and enclosed in curly brackets {}. The number of opening '(&apos ...

javascriptjqueryangularregex

How to Incorporate the Angular Material Theme into Your Angular 17 Stackblitz Projects

Stackblitz's previous versions included a styles.css file where we could simply import prebuilt themes like this: @import "~@angular/material/prebuilt-themes/indigo-pink.css"; However, in the latest version of Stackblitz which utilizes glob ...

cssangularsassstackblitz

The error message "tsc not found after docker image build" appeared on the

My goal is to deploy this program on local host. When I manually run "npm run build-tsc," it works successfully. However, I would like Docker to automatically run this command when building the image. Unfortunately, I receive an error saying that tsc is no ...

node.jstypescriptdocker

angular form validation methods

I am having issues with validating the form below. The required validation message is not appearing for my input type="file" field, even though the validation works well for my other textboxes. How can I validate the input as a required field? Please see ...

angular

Compiling a list of products, but the user interface needs some adjustments

Currently, I have designed a product list menu that includes a hover dropdown feature. This means that when a user hovers over a specific menu item, the corresponding list will automatically appear. However, I am facing two issues with this setup. Firstly, ...

htmlcssangular

The compatibility issue arises when trying to utilize Axios for API calls in Ionic 6 React with react-query on a real Android device in production. While it works seamlessly on the emulator and browser

My form utilizes react-hook-form to submit data to a server. Here is the code: <FormProvider {...methods}> <form onSubmit={handleSubmit(onIndividualSignup)}> <Swiper onSwiper={(swiper) => setSlidesRef(s ...

reactjstypescriptaxiosreact-queryionic6

Exclusive Vue3 Props that cannot be used together

How can a component be created that accepts either json with jsonParserRules or jsonUrl with jsonParserRulesUrl, but not both? It would be ideal if the IDE could provide a warning when both props are specified. Example of an Attempt that does not Work < ...

typescriptvue.jsvuejs3

Changing the Class of an Element in a Different Component with Angular 2+

Currently in a project utilizing Angular 4, I have implemented two components: app.component and other.component Within app.component.html, there exists a div with the name attribute myClass. <div class="myClass"></div> In the other.componen ...

javascriptangulartypescript

Achieving a shuffling CSS animation in Angular 8 may require some adjustments compared to Angular 2. Here's how you can make it

Seeking assistance with animating an app-transition-group component in Angular 8. My CSS includes: .flip-list-move { transition: transform 1s; } Despite calling the shuffle function, the animation always happens instantly and fails to animate properly ...

cssangular

Retrieve the value of [routerLinkActive] in the component's class

Recently, I've been working on a tab component called TabComponent and it includes the following HTML template: <a [routerLink]='link' [routerLinkActive]="[is-active]">link label</a> <button>Close tab</button> The c ...

javascripttypescriptangular

Efficient Ways to Utilize Global CSS in an Angular Project Without CLI

I am utilizing ASP.NET MVC as the server and Angular as the client application. Instead of a static index.html file, I have index.cshtml. The styles I am using are global styles rather than component-scoped. My query revolves around working with a bunch ...

cssangulartypescriptwebpackecmascript-6

Combining storybook and stencil: A comprehensive guide

I'm currently working on integrating storybook with stencil, but the stencil project was initially set up with the app starter using npm init stencil. Here's how it looks I've been researching how to use stencil with storybook, but most res ...

typescriptstorybookstenciljs

Using solely the directory to import index.ts

When attempting to import a module called index.ts from a directory by only specifying the directory name and not the module name itself, I encountered a TS2307 error stating "Cannot find module". Here is a snippet from ./src/main.ts: 'use strict&ap ...

typescript

Angular 5 disrupts the responsiveness of Bootstrap cards during the build process

My issue involves multiple bootstrap cards. In my Angular 5 development environment, the cards display correctly. They are arranged in rows of 8 cards each, and when the screen is resized, the card size adjusts accordingly, eventually switching to 4 cards ...

angularbootstrap-4

Guide to accessing and modifying attributes of Ionic components in TypeScript file

I am curious about how to manipulate the properties or attributes of an Ionic component from a TypeScript file. For example, if I have an input component on my HTML page: <ion-item> <ion-input type="text" [(ngModel)]="testText"></ion ...

angulartypescriptionic-frameworkionic2