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

Ensure the proper sequence of field initialization within a TypeScript class constructor

Is there a way to ensure the proper initialization order of class fields in TypeScript (4.0) constructors? In this example (run), this.x is accessed in the method initY before it's initialized in the constructor: class A { readonly x: number rea ...

typescript

Is it possible for a factory provider to include optional dependencies?

As an illustration: @NgModule ({ providers: [ { provide: MyService, useFactory: (optionalDependency) => new MyService(optionalDependency) deps: [ANOTHER_DEP] } }) class MyModule {} Is it possible for useFactory to include optio ...

angulartypescriptdependency-injection

How should I set up my TestBed configuration in Jasmine test scenarios within an Angular environment?

As I begin writing test cases for Angular, I've come across various ways to configure my TestBed by reading articles online. Here are a few examples: Example 1: beforeEach(async(() => { TestBed.configureTestingModule({ ... }).compileCompone ...

angularjasminetestbed

What is the process for integrating additional Firebase Cloud Functions into an Angular Universal project?

When working on an Angular Universal project, the fixed configuration for firebase.json looks like this: { "hosting": [{ "target": "PROJECT-ID", "public": "dist/PROJECT-ID/dist/PROJECT-ID/bro ...

angulargoogle-cloud-functionsangularfire2firebase-hostingangular-universal

Display a pop-up directly below the specific row in the table

I am working on creating a table where clicking on a row will trigger a popup window to appear right below that specific row. Currently, the popup is displaying under the entire table instead of beneath the clicked row. How can I adjust my Angular and Bo ...

angularcssbootstrap-4

Issues with Angular 8 arise when attempting to use JavaScript after pressing the back button in the browser

While working on my Angular 8 project, everything runs smoothly until I hit the browser's back button. Once I do this, my external JavaScript stops functioning. I have tried using JavaScript in various ways, such as importing, requiring, and putting ...

javascriptangular

What is the process for applying cdkDropList to the tbody when using mat-table instead of a traditional HTML table?

I have been experimenting with the mat-table component in my Angular project, following a simple example from the documentation: <table mat-table [dataSource]="dataSource" class="mat-elevation-z8"> <!--- These columns can be ...

htmlangulartypescriptmat-tableangular-cdk-drag-drop

What is the Typescript compiler utilized by Visual Studio 2015 when compiling on save?

Currently using Visual Studio 2015 Update 3 with TypeScript 2 for VS installed. I have a basic ASP.NET Core MVC web application with a few simple TypeScript files. The project contains a tsconfig.json file in the root folder with "compileOnSave": true. I ...

typescriptvisual-studio-2015compilation

Why does my ngFor consistently refresh while the array remains unchanged?

Issue at hand: Whenever I launch this component, the ngFor div continuously updates and causes my RAM to deplete. Typically, ngFor is triggered when the array is updated; however, in my case, the array (announcements) only updates once in the constructor. ...

javascriptangulartypescriptfrontendngfor

An issue occurred in NestJs where it was unable to access the property '__guards__' because it was undefined

Currently, I am in the process of incorporating a basic authentication system into my Nest project. After including the following line in my controller: @UseGuards(AuthGuard('local')) I encountered this error message: ERROR [ExceptionHandler] C ...

typescriptauthenticationnestjspassport.js

Monaco utilized for Angular web-based code editing platform

We recently created an online code editor in our project using the Monaco editor. Our next goal is to integrate an Angular editor into this platform. To achieve this, we require NPM support to install dependencies directly from the editor. If anyone has ...

angularnpmnode-modulesdependency-managementcode-editor

Having trouble retrieving the JSON data from the getNutrition() service method using a post request to the Nutritionix API. Just started exploring APIs and using Angular

When attempting to contact the service, this.food is recognized as a string import { Component, OnInit } from '@angular/core'; import { ClientService } from '../../services/client.service'; import { Client } from '../../models/Cli ...

angulartypescript

TypeScript encountered an error with code TS2305, stating that the module "constants" does not have any exported members

My Vite + React + TypeScript application has the following structure: src constants a.ts b.ts index.ts components Comp.tsx tsconfig file with "baseUrl": "src" The content of a.ts is as follows: export const ARRAY = ...

reactjstypescriptvitereact-typescript

I'm having trouble with ViewChild - consider upgrading to beta7 for a solution

import {Page,NavController,NavParams,Platform,IonicApp} from 'ionic-angular'; import {ViewChild} from '@angular/core'; @Page({ templateUrl: 'build/pages/tabspage/tabspage.html' }) @ViewChild('myTabs') tabRef: T ...

ionic-frameworkangularionic2

What causes two variables of identical types to exhibit varying behaviors based on their creation methods?

What causes the types of tuple and tuple2 to be different even though both nums and nums2 are of type (0 | 1 | 2)[]? // const nums: (0 | 1 | 2)[] const nums: (0 | 1 | 2)[] = []; // let tuple: (0 | 1 | 2)[] let tuple = [nums[0], nums[1]]; // const nums2: ...

typescript

Adjust the page URL during execution of a Protractor test

When conducting my protractor tests, I encountered a scenario where I needed to perform an action on page1 and then navigate to page2 in the same test script to verify the results. describe('something', function() { describe('foo', f ...

angularprotractor

A class or another interface is the only type that an interface is allowed to extend

We are currently using typescript version 2.9.2 I encountered an issue while trying to extend the interface DropDownOption. I received the error "error TS2312: An interface may only extend a class or another interface." Is there an alternate approach to ...

angulartypescript

Changing function arguments in TypeScript using the spread operator

Could the Tuple spreading syntax in Typescript be utilized to consolidate these function overloads? The challenge lies in the necessity to refactor the function arguments into new types. type Type = TString | TNumber type TString = { tag: 'string&apos ...

typescript

Issue with ToggleButtonGroup causing React MUI Collapse to malfunction

I'm having trouble implementing a MUI ToggleButtonGroup with Collapse in React. Initially, it displays correctly, but when I try to hide it by selecting the hide option, nothing happens. Does anyone have any suggestions on what might be causing this ...

reactjstypescriptmaterial-ui

Component in Angular not reloading when routerLink is clicked

When attempting to trigger a click event, I am unable to reload the component. The code snippet that I have tried is as follows: (dealCode,periodName) => { let url:any='/valuation;dealcode=J9PPR;fundPeriod=2019Q3;useDefault=true'; t ...

angularangular6angular2-routing