Angular6: click function only works some of the time - angular-material

Question

I'm using element.scrollIntoView() in my angular app.
I'm getting the desired element to come into view when my click function works.
my TS file:
elem1;
elem2;
ngOnInit() {
this.elem1 = document.getElementById('elem1');
this.elem2 = document.getElementById('elem2')
}
handleElemScroll(elem) {
// elem.scrollTop = 1000;
elem.scrollIntoView({behavior: 'smooth', block: 'end'});
}
And in my template, I am using mat-nav-list, and on click, passing the id of the element and using elem1.scrollIntoView() or elem2.scrollIntoView() to bring the desired element into view (for now bring it into view, but ideally the element should be at the top).
<div class="new-side-nav">
<mat-nav-list>
<a mat-list-item>
<span (click)="handleElemScroll(elem1)">Go to elem1</span>
</a>
<a mat-list-item>
<span (click)="handleElemScroll(elem2)">Go to elem2</span>
</a>
</mat-nav-list>
</div>
When the click function works, I am able to see both elements come into view on click (scrollIntoView works). But the click behavior is unpredictable. Sometimes the click works and the handleElemScroll() function runs, others time it does nothing.
Any clue as to why this occurs?

Answer 1

Ok, as i told you before look at this code (Angular 6 in my case, but it must work from 2):
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'eas-requests',
templateUrl: './requests.component.html',
styleUrls: ['./requests.component.css']
})
export class RequestsComponent implements OnInit {
// No need to declare
el1:HTMLElement;
el2:HTMLElement;
constructor() { }
ngOnInit() {
//No need to declare
this.el1 = document.getElementById('el1');
this.el2 = document.getElementById('el2');
}
// Just declare this method and receive html element.
clickEvent(e:HTMLElement){
e.scrollIntoView({behavior: 'smooth', block: 'end'});
}
}
And html:
<div id="el1" (click)="clickEvent($event.target)">Element 1</div>
<div id="el2" (click)="clickEvent($event.target)">Element 2</div>
In this action you pass click event. So in function you receive HTMLElement what you click. In my case all work fine as expected on any element where i use click event.