How to prevent scrolling with navigation in angular 17 component?

I added this code in app.config.ts to scroll to top with every navigation

app.config.ts

const scrollConfig: InMemoryScrollingOptions = {
scrollPositionRestoration: 'top',
};

const inMemoryScrollingFeature: InMemoryScrollingFeature =
withInMemoryScrolling(scrollConfig);

export const appConfig: ApplicationConfig = {
providers: [
provideRouter(routes, inMemoryScrollingFeature),
],
};


And I need to add, delete query params with typescript like this, but with every change in the query params it scrolls to the top.

app.component.ts

addQueryParam(key: string, value: string) {
this.router.navigate([], {
relativeTo: this.route,
queryParams: { [key]: value },
queryParamsHandling: 'merge',
});
}

deleteQueryParam(key: string) {
this.router.navigate([], {
relativeTo: this.route,
queryParams: { ...this.route.snapshot.queryParams, [key]: null },
queryParamsHandling: 'merge',
});
}


How to prevent scrolling if the change is only in query params?

Continue reading...