call scrollIntoView on a nativeElement of ElementRef

Question

I'm trying to make a scroll into view directive in Angular 12, and I when I call scrollIntoView on nativeElement of ElementRef, it gives me the error

ERROR TypeError: this.elementRef.nativeElement.scrollIntoView is not a function
    at ScrollIntoViewDirective.ngOnInit

Typescript file of the directive:

@Directive({
  selector: '[scrollIntoView]'
})
export class ScrollIntoViewDirective implements OnInit {

  constructor(private elementRef: ElementRef) { }

  ngOnInit() {
    if (!!this.elementRef.nativeElement) {
      this.elementRef.nativeElement.scrollIntoView({
        behavior: 'smooth',
        block: 'center'
      });
    }
  }
}

HTML template file:

<mat-list-item class="custom-filters-item"
                       [scrollIntoView]="activeFilter&& activeFilter.id== filter.id"
                       [class.custom-filters-item-active]="activeFilter&& activeFilter.id== filter.id"
                       (click)="handleSelectFilter(filter)">