Calling custom JavaScript plugin from Angular2

Question

We have an existing plugin that we call like this

var result = $('.myElement').OurPluginName({});

I am trying to replace this with a Angular2 Directive.

My test.ts:

/// <reference path="test.d.ts" />
import { Directive, ElementRef, NgZone } from '@angular/core';

@Directive({
    selector: 'test'
})

export class Test {
    public ngAfterViewInit(): void {
        this.zone.runOutsideAngular(() => {
            this.OurPluginName({});
        });
    }
}

My test.d.ts:

declare function OurPluginName(options: Object): void;

Despite creating a declaration, it still is giving me an error:

Property 'OurPluginName' does not exist on type 'Test'.

SOLUTION: (thanks to Volodymyr Bilyachat)

test.ts:

/// <reference path="test.d.ts" />
import { Directive, ElementRef, NgZone } from '@angular/core';

@Directive({
    selector: 'test'
})

export class Test {
    public constructor(private elRef: ElementRef) {
    } 

    public ngAfterViewInit(): void {
        this.zone.runOutsideAngular(() => {
            $(this.elRef.nativeElement).OurPluginName({});
        });
    }
}

test.d.ts:

declare var $: any;

Vova Bilyachat · Accepted Answer · 2017-01-30 02:04:27Z

1

You are calling this.OurPluginName({}) which is not defined.

export class Test {
    public ngAfterViewInit(): void {
        this.zone.runOutsideAngular(() => {
            this.OurPluginName({}); <-- here you call for this
        });
    }
}

you should have something like this:

add type definition for $ since your plugin is jquery one

declare var $: any;

define in class method to call

export class Test {
  constructor() {

  }

  CallOurPluginName(options) {
    $('.myElement').OurPluginName({})
  }

  public ngAfterViewInit(): void {
    this.zone.runOutsideAngular(() => {
      this.CallOurPluginName({});
    });
  }
}

PS. Its not the best way but it should work.

edited Jan 30, 2017 at 2:04

answered Jan 30, 2017 at 1:56

Vova Bilyachat

19.5k4 gold badges60 silver badges88 bronze badges

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

8 Comments

Aximili Over a year ago

Thanks Volodymir. But I was tyring to get rid of the jQuery selector and change it to a directive, so I now have <test></test>. Is it possible?

Vova Bilyachat Over a year ago

@Aximili well but you plugin is jquery plugin?

Vova Bilyachat Over a year ago

@Aximili its possible but you need to rewrite your plugin to be angular component. because var result = $('.myElement').OurPluginName({}); this telling me that you are using jquery

Aximili Over a year ago

Sorry it takes an element, doesn't have to be jQuery. It can be $('.myElement')[0].OurPluginName({});

Aximili Over a year ago

Sorry I was wrong please ignore my last comment, I got confused myself. You're right. Thank you Volodymyr!

|

Collectives™ on Stack Overflow

Calling custom JavaScript plugin from Angular2

1 Answer 1

8 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Related