Calling function triggered by event from an external JS file in angular component

Question

Calling function triggered by event from an external JS file in angular component

1.4k views Asked by Arjun P At 18 December 2021 at 08:44

I am trying to convert a webpage designed by JS, HTML, CSS into an angular project. I have included the JS file in index.html as given below

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sample</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body class="">
<app-root></app-root>

<script type="text/javascript" src="assets/scripts/sample.js"></script>
</body>
</html>

sample.js

if (document.getElementById("fixedHeader")) {
    window.onscroll = function () { fixedHeader(); };
    var header = document.getElementById("fixedHeader");
    var fixed = header.offsetTop;
} 
function fixedHeader() {
    if (window.pageYOffset > fixed) {
        header.classList.add("fixed-active-lob");
        $('body').addClass("fixed-nav");
    } else {
        header.classList.remove("fixed-active-lob");
        $('body').removeClass("fixed-nav");
    }
}

current.component.html

<div class="gb-nav gn">
    <div id="fixedHeader" class="header">....
    </div>
</div>

sample.css File included in styles.css having

.gb-nav.gn .fixed-active-lob {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999999;
    -webkit-box-shadow: 0px 10px 15px -1px rgba(0,0,0,0.45);
    -moz-box-shadow: 0px 10px 15px -1px rgba(0,0,0,0.45);
    box-shadow: 0px 10px 15px -1px rgba(0,0,0,0.45);
}
body.fixed-nav{
    padding-top:56px
}

I was not able to trigger the function from sample.js in angular component. However I was able to reap the desired result by defining the same function again in the

current.component.ts as:

@HostListener('window:scroll', ['$event'])
    scrollHandler(event: any) {
    console.log("Scroll event", event);
    this.fixedHeader();
    }
fixedHeader() {
    var header = document.getElementById("fixedHeader");
    var fixed: number = 0;
    if (header?.offsetTop != undefined) {
      fixed = header?.offsetTop;
    } else {
      fixed = 0;
    }
    if (window.pageYOffset > fixed) {
        header?.classList.add("fixed-active-lob");
        $('body').addClass("fixed-nav");
    } else {
        header?.classList.remove("fixed-active-lob");
        $('body').removeClass("fixed-nav");
    }
}

But I would like to use the function from the JS file instead of redoing it in the ts file, please help.

Original Q&A

There are 1 answers

**Aluan Haddad** · Accepted Answer · 2021-12-20T08:24:10+00:00

First, modify sample.js such that it exports fixedHeader like so

if (document.getElementById("fixedHeader")) {
  window.onscroll = function () { fixedHeader(); };
  var header = document.getElementById("fixedHeader");
  var fixed = header.offsetTop;
}  

export function fixedHeader() {
  if (window.pageYOffset > fixed) {
    header.classList.add("fixed-active-lob");
    $('body').addClass("fixed-nav");
  } else {
    header.classList.remove("fixed-active-lob");
    $('body').removeClass("fixed-nav");
  }
}

With this adjustment, we've made sample.js into a module, with a single export named fixedHeader, and have thus enabled other modules, such as our current.component.ts, to consume it via the standard, explicit, and canonical method for sharing code in JavaScript: Modules.

Next, set "allowJs": true in your project's tsconfig.json, to inform TypeScript that our project includes a mix of both TypeScript and JavaScript source files.

Finally, import the fixedHeader function we've exported from sample.js directly into current.component.ts, remove the now redundant method from the Angular component class, and call the imported function as follows

 import {Component, HostListener} from '@angular/core';

 import {fixedHeader} from '../assets/scripts/sample.js';

 @Component({
   // Angular boilerplate and ceremony
 })
 export class CurrentComponent { // or whatever it is actually called
   @HostListener('window:scroll', ['$event'])
   scrollHandler(event: Event) {
     console.log("Scroll event", event);
  
     fixedHeader();
  }
}

Finally, remove the script tag that originally loaded sample.js from index.html.

Note: adjust import path above as needed based on the actual location of the files relative to one another.

TechQA.

Calling function triggered by event from an external JS file in angular component

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in ANGULAR

Related Questions in TYPESCRIPT

Related Questions in DOM-EVENTS

Related Questions in EXTERNAL-JS

Popular Questions

Popular Tags

Trending Questions