Javascript Script inside HTML is not executing with Angular 12-CodePudding

Problem: I am trying to hide my navigation bar on scroll-down and show it on scroll-up. I placed my JavaScript to do this inside my HTML body at the bottom of the page, but it does not work. Any help is appreciated.

HTML(mainpage.component.html):

<body>
    <div class="flex" id="outercontainer">    
        <nav id="navbar">
            <a href="#" class="brand">Brand Name</a>
            <ul>
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#blogs">Services</a></li>
                <li><a href="#gallery">Contact</a></li>
            </ul>
        </nav>
        <div>
        //content
        </div>
<script type="text/javascript">
    var lastScrollTop = 0;
    navbar = document.getElementById("navbar");
    window.addEventListener("scroll",function(){
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        if(scrollTop > lastScrollTop){
            navbar.style.top="-80px";
        } else{
            navbar.style.top="0";
        }
        lastScrollTop = scrollTop;
    })    
</script>
</body>

CSS (mainpage.component.scss)

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif ;
    scroll-behavior: smooth;
}
nav{
    position: fixed;
    top: 0;
    width: 100%;
    height: 80px;
    background:#607d8b;
    padding: 0 100px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: 0.5s;
}
ul{
    margin: 0;
    padding: 0;
    display: flex;
}
ul li{
    list-style: none;
}
ul li a{
    color: #fff;
    padding: 0 20px;
    font-size: 1.1em;
    text-decoration: none;
    font-weight: bold;
}
.brand{
    font-size: 1.8em;
    color: #fff;
    font-weight: bold;
    text-decoration: none;

}
body{
    font-family: Arial, Helvetica, sans-serif;
    background-color: #f6edd9;
    text-align: center;
    margin: 0;

    #sidebar{
    width: 10vw;
    height: 100vh;
    flex-direction: column;
    justify-content: flex-end;
    max-width: 80px;
    min-width: 30px;
    }

}

#banner{
    width: 100%;
    align-items: center;

    #nameimagecontainer{
    width: 60%;
    }

    #selfphotocontainer{
    width: 30%;
    }
}

#contentcontainer{
    font-size: 30px;
}
#getintouchbutton{
    font-style: normal;
}
#mainpagecontainer{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;  

    #workcontainer{
        width: 100%;
        height: 100vh;
        background-color: green;
    }
    #servicescontainer{
        width: 100%;
        height: 100vh;
        background-color: red;
    }    

    #actioncontainer{
        width: 100%;
        height: 100vh;
        background-color: purple;
    }
    #contactcontainer{
        width: 100%;
        height: 100vh;    
        background-color: orange;
    }

}

So far, my script does nothing. Thank you.

CodePudding user response：

You could refer to this article on how to add scripts to the code.

However, I would not recommend to do this. Angular removes all script tags from the code, and it is uncommon practice to add scripts this way.

Much better approach would be to move the code in "script" tag into Your mainpage.component.ts into ngOnInit method.

CodePudding user response：

add your scripts code inside your mainpage.component.ts

example://

constructor(){
   var lastScrollTop = 0;
        navbar = document.getElementById("navbar");
    window.addEventListener("scroll",function(){
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        if(scrollTop > lastScrollTop){
            navbar.style.top="-80px";
        } else{
            navbar.style.top="0";
        }
        lastScrollTop = scrollTop;
    })    
}

// or you can use lifecycle hook here

ngOnInit(){
   var lastScrollTop = 0;
            navbar = document.getElementById("navbar");
        window.addEventListener("scroll",function(){
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
            if(scrollTop > lastScrollTop){
                navbar.style.top="-80px";
            } else{
                navbar.style.top="0";
            }
            lastScrollTop = scrollTop;
        }) 
}

still i would recommend Renderer2 or DOCUMENT injection token, you can read about them in angular documentation

CodePudding user response：

constructor(@Inject(DOCUMENT) private document:Document){
}

@HostListener('scroll',['$event'])
onScrollHandler(e:Event){
let lastScrollTop = 0;
 const navbar = this.document.getElementById("navbar"); // you can use viewchild,renderer2 also

const scrollTop = this.document.defaultView.pageYOffset || this.document.documentElement.scrollTop;
            if(scrollTop > lastScrollTop){
                navbar.style.top="-80px";
            } else{
                navbar.style.top="0";
            }
            lastScrollTop = scrollTop;
}

ngOnInit(){

        }) 
}

CodePudding user response：

Add your code inside the mainpage.component.ts file