Javascript Script inside HTML is not executing with Angular 12

user_17041124 0
Viewed 1060

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.

angular html javascript
4 Answers

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.

user_54337130

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

user_120969850 
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(){

        }) 
}
user_120969850

Add your code inside the mainpage.component.ts file

user_133301270
Related