The ngAfterViewChecked function seems to be caught in an endless loop

I am facing an issue where the 

<cdk-virtual-scroll-viewport>
starts from the bottom, but I am unable to scroll up.

I suspect that this problem is related to the use of AfterViewChecked. Even after trying AfterViewInit, the issue persists.

@ViewChild(CdkVirtualScrollViewport, { static: false }) viewport: CdkVirtualScrollViewport;

ngAfterViewChecked() {
  this.viewport.scrollTo({ bottom: 0 });
}

<cdk-virtual-scroll-viewport itemSize="70">
  <div *cdkVirtualFor="let message of messages">
    {{message}}
  </div>
</cdk-virtual-scroll-viewport>

How can I enable scrolling upwards again? Or find a way to execute AfterViewChecked only once?

angulartypescript

Answer №1

AfterViewChecked implementation will automatically scroll the list down every time a view change is finished.

An alternative approach is to utilize ViewChild setter, which will only be triggered once the child element is fully loaded and ready.

@ViewChild(CdkVirtualScrollViewport, { static: false }) 
set viewport(viewport: CdkVirtualScrollViewport) {
   viewport.scrollTo({ bottom: 0 });
}

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

Error message: Unable to associate with DIRECTIVE as it is not a recognized attribute of 'div'

Despite searching through similar questions about this error, I have not been able to find a solution. The issue arises with my highlight directive, which takes an input parameter index. Initially, the directive worked perfectly when declared within the m ...

angularangular-directive

Is it possible to access the generic type that a different generic type inherits in TypeScript?

I've developed an interface specifically designed for types capable of self-converting to IDBKey: interface IDBValidKeyConvertible<TConvertedDBValidKey extends IDBValidKey> { convertToIDBValidKey: () => TConvertedDBValidKey; } My goal n ...

typescripttypescript-generics

The property 1 cannot be added because the object is not extendable in React

Does anyone know what is causing the following issue? I am unable to insert a new object into a key object within my arrays of objects. For example, when I try to insert a new email at index 1 in the 'emails' array, it throws an error stating "ca ...

javascriptreactjstypescript

``Is it possible to iterate through a collection of objects using a loop?

I am facing an issue with updating a global array that contains objects, where each object includes another array. My goal is to update the main array with values from the arrays within the objects following a specific logic! generalArray = [{name:String, ...

javascriptarraysangulartypescriptindexof

Tips for triggering a click event on a DOM element using Angular 2

How can I automatically load a component upon loading? <app-main id="tasks" [(ngModel)]="tasks"></app-main> Here is the function call from JavaScript: public tasks; ngOnInit() { this.tasks.click(); } I have attempted using document.getE ...

javascriptangulardom

New behavior in Vue 3: defineEmits is causing issues with defineProps data

Currently, I am working with Vue 3 and TS 4.4. In one of my components, I am using defineProps to define prop types. However, when I try to add defineEmits, VS Code starts indicating that my props variable is not recognized in the component template. Below ...

javascripttypescriptvue.jsvuejs3

Easy steps to bring in type definitions from an npm package using Vite

I am currently developing a package with several ts functions that will be utilized by multiple repositories, including mobile and web applications. In our team, we use vite as our primary build tool, which is also integrated into the repository. Below is ...

typescriptnpmbuildvite

Encountered an issue with retrieving schema during self-referencing validation with openapi generator

I created an openapi specification and now I am looking to generate a client for it. openapi.yaml After some research, I decided to use the openapi generator to create a typescript-axios client. This is the command I used: openapi-generator-cli generate ...

typescriptrestopenapiopenapi-generator

React Typescript Mui causing `onBlur` event to trigger with every change occurring

I'm currently developing a front-end application using Typescript and React with MUI. The form code I have written is as follows: <TextField label="Password" value={this.state.password} placeholder="Choose a password" type="password" onC ...

reactjstypescriptbluronblurmui

Encountered a 'angular is not defined' error message when attempting to upgrade an AngularJS1 component

I am currently in the process of upgrading AngularJS1 components to Angular6. My approach involves creating wrappers for all existing AngularJS1 components by extending "UpgradeComponent" and placing them under the folder "directive-wrappers" in my example ...

angularjsangularng-upgradeangular-upgrade

How can one correctly log out of an Angular application that is integrated with Firebase Authentication and Firestore?

How can I efficiently sign out of an Angular application that uses Firebase Authentication and Firestore? Although I can successfully sign in with Google authentication, signing out poses some challenges. My ultimate goal is to ensure that when a user cli ...

angularfirebasegoogle-cloud-firestorefirebase-authenticationangularfire

Issue with Angular 2 in Visual Studio 2013: Pressing Ctrl+K+D causes formatting to change to lowercase

Please note that while this issue is not directly related to Angular2, anyone who uses Angular2 with Visual Studio 2013 may be able to help. Whenever I use the key combination Ctrl + K + D in Visual Studio 2013, it changes HTML or Angular2 directives/mark ...

visual-studio-2013angular

Having trouble getting a constructor to function properly when passing a parameter in

Here's the code snippet I'm working with: import {Component, OnInit} from '@angular/core'; import {FirebaseListObservable, FirebaseObjectObservable, AngularFireDatabase} from 'angularfire2/database-deprecated'; import {Item} ...

javascriptangulartypescriptfirebaseangular5

Switching from HttpModule to HttpClientModule

Angular's transition from HttpModule to HttpClientModule is causing some confusion, as discussed in detail here. The official Angular tutorial at https://angular.io/tutorial/toh-pt6 still uses HttpModule, while the Fundamentals documentation at https ...

angularhttprxjsreactivexangular-httpclient

Discover the subsite inventory of a SharePoint site using TypeScript

Is there a way to gather all sub-sites from my SharePoint site and organize them into a list? I initially thought of using this.context.pageContext, but could not locate it. Please excuse my seemingly simple question, as I am still learning TypeScript. ...

typescriptsharepoint

Issues with data binding in Angular2 are arising specifically in IE11

After successfully loading the application on Chrome, Firefox, and Edge, I encountered difficulties when trying to load it on IE11. The data bindings were not created properly, despite the internal data being fetched correctly through a websocket connectio ...

javascriptangularcross-browserinternet-explorer-11

Error in Typescript: An element is implicitly assigned the 'any' type because a string expression is being used to index a different type

Hello everyone, I'm fairly new to TypeScript and I've been struggling to troubleshoot an error in my code. Can someone please assist me with solving this TypeScript error? I keep getting the error message: "Element implicitly has an 'any&a ...

typescriptnext.js

Encountered an ERROR when attempting to deploy a next.js app to Azure Static Webapp using GitHub actions for

I am encountering an issue that is causing some frustration. The problem only arises during my github actions build. Interestingly, when I run the build locally, everything works perfectly and I can access the route handler without any issues. However, eve ...

typescriptnext.jsgithub-actionsazure-static-web-app

What is the best way to trigger an event within an Angular app using RxJS in version 10?

As I venture into the world of Angular10, I find myself experimenting with a Canvas and honing my skills in drawing on it. Let's refer to the object drawn on the canvas as a "Foobar" - my Angular10 code for drawing Foobars is coming along nicely. Util ...

angularrxjs

React slick slider not functioning properly with custom arrows

"I have encountered an issue while trying to implement multiple sliders in my component with custom arrows positioned below each carousel. Despite following the documentation meticulously, the arrows do not respond when clicked. What could possibly be ...

reactjstypescriptnext.jscomponentsslider