How can i access window object in the angular5 in the way we do this “ @ViewChild('fileInput') inputEl: ElementRef” for DOM elements?

Question

I tried to search already asked questions related to my issue, but the solutions could not help.

Angular_5=>frontend(with angular universal)

Nodejs=>Backend

I want to do the scrolling effect in typescript something like in the code snippet with Jquery code but not with " jquery " module. My concern is to do this as per angular5 guidelines, keeping in mind the server side rendering(angular universal).

onWindowScroll(event){ 
    if(window.scrollY >=350){
        console.log("some_value"+window.scrollY);
        $('.evaluate-h1').addClass('animated fadeInUp')
    }
}

Answer 1

npm install smoothscroll-polyfill --save

then add it to your polyfill.ts file:

/**
 * Polyfill for smooth scrollIntoView()
 */
require('smoothscroll-polyfill').polyfill();

afterwards you can use vanilla javascript .scrollIntoView() to scroll to your ElementRef:

const element:HTMLElement = this.document.getElementById(this.slug);

if(element) element.scrollIntoView({
    behavior: 'smooth', 
    block: 'start' 
});