I am facing an issue with angular material and scrollIntoView({ behavior: 'smooth', block: 'start' }).
My goal is to click on a mat-menu-item, which is inside an item in a mat-table, and scroll to a specific HTML tag
This is my target
<h1 #formUpdate class="titles">{{ editOrCreate$ | async }}</h1>
First Approach
Here is the HTML code that I need to make work
<mat-menu #menu="matMenu">
<button mat-menu-item (click)="formUpdate.scrollIntoView({ behavior: 'smooth', block: 'start' })">Top</button>
</mat-menu>
The code above is not working, but if I try it in a different way, like a button outside my table, it works Code I have tried
<button mat-button (click)="formUpdate.scrollIntoView({ behavior: 'smooth', block: 'start' })">Top</button>
The code above works
Second Attempt
I attempted to do it in the file.ts, as shown in the code below
file.html
<mat-menu #menu="matMenu">
<button mat-menu-item (click)="updateItem(formUpdate )">Top</button>
</mat-menu>
file.ts
export class WorkspacesComponent{
public updateItem(formUpdate){
target.scrollIntoView({ behavior: 'smooth' });
}
}
All code.html
[... full HTML code here ...]
file.ts method
public updateItem(workspace: Workspace, updateOption: string = '', formUpdate) {
let description;
formUpdate.scrollIntoView({ behavior: 'smooth', block: 'start' })
if (updateOption === 'Criar Versão Assunto') {
description = `Criado a partir do workspace '${workspace.name}' em ${new Date().toLocaleDateString()}`;
updateOption = 'Criar Assunto';
} else {
description = workspace.description;
}
this.store.dispatch(new userActions.WorkspacesSelect(workspace._id));
this.language$.next('pt-br');
this.workspaceForm$.next(this.newForm(workspace.name, description, workspace.language));
this.store.dispatch(new userActions.WorkspaceEditOrCreateState(updateOption));
}
Both cases are not working.
I require assistance in making it work similar to my attempt with a mat-button outside my table