Invoking a function in an Angular component through an event triggered by an external JS file

Question

Invoking a function in an Angular component through an event triggered by an external JS file

I'm in the process of converting a webpage that was originally designed using JS, HTML, and CSS into an Angular project. I have already included the JS file in index.html as shown 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 encountered some issues trying to trigger the function from sample.js within the Angular component. However, I managed to achieve the desired result by redefining the same function 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");
    }
}

However, I would prefer to utilize the function from the JS file instead of duplicating it in the ts file, can anyone provide guidance on how to accomplish this?

javascript angular typescript dom-events external-js

Answer 1

Answer №1

Initially, update sample.js to export the function fixedHeader in the following manner:

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");
  }
}

By making this adjustment, we have transformed sample.js into a module with a single export named fixedHeader, allowing other modules like current.component.ts to consume it more efficiently through JavaScript Modules.

Subsequently, add "allowJs": true to your project's tsconfig.json to signal TypeScript about the presence of both TypeScript and JavaScript source files within the project.

Afterward, directly import the fixedHeader function from sample.js into current.component.ts. Remove any redundant methods from the Angular component class and call the imported function as shown below:

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

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

 @Component({
   // Angular boilerplate and setup
 })
 export class CurrentComponent { // or the actual name
   @HostListener('window:scroll', ['$event'])
   scrollHandler(event: Event) {
     console.log("Scroll event", event);
  
     fixedHeader();
  }
}

Lastly, delete the script tag that initially loaded sample.js from index.html.

Note: Adjust the import path above according to the actual file locations relative to each other.

Answer 2

Initially, update sample.js to export the function fixedHeader in the following manner:

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");
  }
}

By making this adjustment, we have transformed sample.js into a module with a single export named fixedHeader, allowing other modules like current.component.ts to consume it more efficiently through JavaScript Modules.

Subsequently, add "allowJs": true to your project's tsconfig.json to signal TypeScript about the presence of both TypeScript and JavaScript source files within the project.

Afterward, directly import the fixedHeader function from sample.js into current.component.ts. Remove any redundant methods from the Angular component class and call the imported function as shown below:

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

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

 @Component({
   // Angular boilerplate and setup
 })
 export class CurrentComponent { // or the actual name
   @HostListener('window:scroll', ['$event'])
   scrollHandler(event: Event) {
     console.log("Scroll event", event);
  
     fixedHeader();
  }
}

Lastly, delete the script tag that initially loaded sample.js from index.html.

Note: Adjust the import path above according to the actual file locations relative to each other.

Invoking a function in an Angular component through an event triggered by an external JS file

Answer №1

Similar questions

Tips for continuously randomizing colors in p5.js

Transforming text into an image during an Ajax response

The issue arises when TypeScript is unable to accurately infer the type as not being undefined following a type guard condition using

Mastering JQuery: Techniques for Managing Events Across Numerous Elements

Resolve the issue with automatically generating SCSS type definitions (style.d.ts) for Preact within a TypeScript webpack setup

Can you explain the mechanics behind the functionalities of @angular and @type dependencies?

Error: HTMLAnchorElement.linkAction is attempting to access an undefined property 'add', resulting in an uncaught TypeError

Would you like to learn how to dynamically alter a button's color upon clicking it and revert it back to its original color upon clicking it again?

Detect the 'mousewheel' event on a container with a concealed overflow

Identifying route changes and new view replacements in Angular: A comprehensive guide

Using the readline function in JavaScript, a sequence of user inputs can be collected. These inputs can be linked to

There seems to be a problem with the external JavaScript file not functioning

Ensuring the Textbox Does Not Allow Zero as the Initial Digit: A Guide

Guide on applying CSS to option tag within a select element in VUE.js

How can I create an input field that comes with a preset value but can be updated by the user with a different name?

Particles.js fails to persist as I scroll down the HTML page

Sending HTML content to viewChild in Angular 5

Combining two JSON objects in JavaScript by matching key values and index positions

Implementing CSS styles on selected elements using jQuery

Guide to direct express.js requests straight to 404 page