TypeScript - How to get an HTML element like using dollar sign ($) in Javascript

Question

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 component 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 compiler doesn't recognize the method "parallax()", warning me this:

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

What happens when you use `$('.parallax').parallax();` from the TS file? What error message, if any? — acdcjunior, Apr 26 '16 at 04: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, May 01 '16 at 00:22

score 4 · Answer 1 · answered Apr 26 '16 at 02:41

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.

answered Apr 26 '16 at 02:41

basarat

261,912
58
460
511

I'm not sure if I understood how to use this. Sorry, but I'm new with Typescript, so I'm here trying everything to learn Angular 2 + Typescript hehe – Leonardo Faitão Apr 26 '16 at 03:15
TypeScript is just JavaScript with *optional type annotations*. So figure out how to do stuff in Angular2 + JavaScript. `parallax` is probably being provided by some library that you haven't mentioned. `$` is a common variable name use for jquery: https://jquery.com/ and if you want to use that lib + jquery this is the type annotation you would *optionally* need. – basarat Apr 26 '16 at 04:02

score 1 · Accepted Answer · edited May 23 '17 at 12:09

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 component landingPage.view.ts file:

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

and then edited my component 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 component through the el variable, I use this element in jQuery, find the components 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!

TypeScript - How to get an HTML element like using dollar sign ($) in Javascript

2 Answers2