Appreciation for your assistance, @basarat!
I utilized your suggestions, however, I required further details to achieve success!
Initially, I encountered an issue using the $ (dollar) sign, which I resolved by implementing the following:
import * as $ from 'jquery';
The aforementioned import addressed my primary query. Nevertheless, it did not suffice to enable the external Javascript function .parallax() to function.
Below, I will outline the steps I took to make it functional, in case someone else requires this solution.
I followed advice from this StackOverflow response.
In accordance with basarat's suggestion, I generated a file named parallax.d.ts, consisting of the subsequent interface:
interface JQuery {
parallax():JQuery;
}
Subsequently, I referenced both parallax and jquery files in my component file landingPage.view.ts:
///<reference path="../../../typings/browser/ambient/jquery/index.d.ts"/>
///<reference path="../../shared/parallax.d.ts"/>
Following this, I made modifications to my component class as follows:
export class AppLandingPage implements AfterViewInit {
static landingPageInitialized = false;
constructor(private el:ElementRef) {
}
ngAfterViewInit() {
if(!AppLandingPage.landingPageInitialized) {
jQuery(this.el.nativeElement)
.find('.parallax')
.parallax();
AppLandingPage.landingPageInitialized = true;
}
};
}
As per my understanding, the constructor references the component via the el variable, where I utilize this element in jQuery to search for components with the ".parallax" class, subsequently calling the function parallax() to activate the JS parallax framework.
While I may not be explaining everything in exact detail, it is now operational! Hehe
Once again, thank you for your invaluable assistance!