Using vanilla js code in Angular 2 (angular-cli)

Question

I am trying to implement the Vanilla Tilt JS plugin in my project, but I can't even seem to find a way of using vanilla js imports in my project.

So far, I have tried using it as a directive, just like you would use a jQuery plugin by using ElementRef , Input etc. from @angular/core.

I have included the script in my .angular-cli.json file under scripts: directly from the npm package that I have installed for Vanilla Tilt JS.

And I was thinking about using it as a directive, since it has its own data-tilt attribute like so:

import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
    selector: '[data-tilt]'
})
export class ParallaxDirective {
    constructor(private el: ElementRef) {

    }
}

But I can't find a way to do this, despite my efforts so far. I am new to Angular 2.

My question is:

Is it possible to use a plain javasciprt plugin inside Angular 2 , and if possible , how can I implement the Vanilla-Tilt JS plugin?

Check this stackoverflow.com/questions/35796961/…

Naga Harish M
– Naga Harish M

2017-03-01 15:57:57 +00:00
Commented Mar 1, 2017 at 15:57 — Naga Harish M
– Naga Harish M, Commented Mar 1, 2017 at 15:57

Tanasos · Accepted Answer · 2017-03-02 12:11:57Z

2

You should be able to import Vinilla-tilt and use the element reference passed into the constructor.

import { Directive, ElementRef, HostListener, Input } from '@angular/core';

const VanillaTilt = require('vanilla-tilt');

@Directive({
    selector: '[data-tilt]'
})
export class ParallaxDirective {
    constructor(private el: ElementRef) {
      VanillaTilt.init(el.nativeElement, {
        max: 25,
        speed: 400
      });
    }
}

edited Mar 2, 2017 at 12:11

Tanasos

4,1285 gold badges36 silver badges65 bronze badges

answered Mar 1, 2017 at 16:03

Alex Jones

3803 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tanasos Over a year ago

The only thing missing here is the el.nativeElement that makes a reference to the DOM.

Collectives™ on Stack Overflow

Using vanilla js code in Angular 2 (angular-cli)

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related