I have the following javascript code in my page that get an element with the class ".parallax" and calls the javascript method "parallax()". Obviously, I need to do this to make the parallax effect to work.

$('.parallax').parallax();

However, once I'm using my HTML elements in the ponent template in TypeScript file, I need to call it from the TS file.

So how can I get this element by its class name and call the javascript method in Typescript file?

---

Obs.: I already tried to do this:

var element = <HTMLElement> document.getElementsByClassName('parallax')[1];
element.parallax();

But the piler doesn't recognize the method "parallax()", warning me this:

TS2339: Property 'parallax' does not exist on type HTMLElement

I have the following javascript code in my page that get an element with the class ".parallax" and calls the javascript method "parallax()". Obviously, I need to do this to make the parallax effect to work.

$('.parallax').parallax();

However, once I'm using my HTML elements in the ponent template in TypeScript file, I need to call it from the TS file.

So how can I get this element by its class name and call the javascript method in Typescript file?

---

Obs.: I already tried to do this:

var element = <HTMLElement> document.getElementsByClassName('parallax')[1];
element.parallax();

But the piler doesn't recognize the method "parallax()", warning me this:

TS2339: Property 'parallax' does not exist on type HTMLElement

• javascript
• jquery
• angular
• typescript

Share Improve this question Follow edited Oct 11, 2016 at 18:30 CerebralFart 3,49055 gold badges2828 silver badges3131 bronze badges asked Apr 26, 2016 at 2:34 Leonardo FaitãoLeonardo Faitão 1311 silver badge55 bronze badges 2

• What happens when you use $('.parallax').parallax(); from the TS file? What error message, if any? – acdcjunior Commented Apr 26, 2016 at 4:53
• Actually, I solved my initial problem to use the $ (dollar) sign by adding this: import * as $ from 'jquery';. However, when I try to use $('.parallax'); in the ngAfterViewInit() I receive the following error in the browser console: Error: SyntaxError: Unexpected token < Evaluating http://localhost:8080/jquery Error loading http://localhost:8080/app/main.js – Leonardo Faitão Commented May 1, 2016 at 0:22

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

$('.parallax').parallax();

If parallax is a JQuery function you need parallax.d.ts:

interface JQuery {
  parallax: any;
}

And I am pretty sure this is what you want.

Thank you for your help, @basarat! I followed your tips, but I needed more information to make it work!

My initial problem was to use the $ (dollar) sign, and I solved it by adding this:

import * as $ from 'jquery';

---

The import above is the right answer to my main question here. However, it was not enough to make the external Javascript function .parallax() to work. I will show below what I did to make ot work whether someone also needs this answer.

I followed some tips from this StackOverflow answer.

Like basarat said, I created a file named parallax.d.ts, but with the following interface:

interface JQuery {
    parallax():JQuery;
}

Then referenced both parallax and jquery files to my ponent landingPage.view.ts file:

///<reference path="../../../typings/browser/ambient/jquery/index.d.ts"/>
///<reference path="../../shared/parallax.d.ts"/>

and then edited my ponent class to this:

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

Now, by my understanding, the constructor is referencing the ponent through the el variable, I use this element in jQuery, find the ponents with the ".parallax" class, and call the function parallax() to make the parallax framework in JS to run.

I'm not sure if I'm explaining everything as it is, but now it works! Hehe

Thank you again for all your help!