CODEWITHSUNDEEP
angularionic2camanjs
sameera207
sameera207

Reputation: 16619

Using a normal JS librarary with Ionic2 + typescript

I'm trying to use camanjs with my ionic2 + typescript project.

I've also had a look at Ionic and Typings blog post by Mike, however it shows adding a library that is already in Typings

Then I found this blog post from josh on adding goole maps that uses CDN method.

By following both of them I've done following so far,

added camanjs via CDN to the index.html file

#index.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.js"></script>
<script src="cordova.js"></script>
...

Following is my ts file

#home.ts 
import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';

declare var Camanjs: any;

@Component({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
  constructor(public navCtrl: NavController) {
  }

  addFilter(){
     Camanjs("#image", function(){
       this.sinCity();
       this.render();
     })
  }
}

and my html file. (when the user click the button I want to apply the filter)

#home.html
<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button (click)="addFilter()">Filter</button>
  <img id='image' src="https://d339b5nop2tkmp.cloudfront.net/uploads/pet_photos/2016/7/13/469479_e76aa_340x340_af1c8.jpg">
</ion-content>

but when I click addFilter() I'm getting the following error

browser_adapter.js:84 ReferenceError: Camanjs is not defined
    at HomePage.addFilter (home.ts:14)
    at DebugAppView._View_HomePage0._handle_click_13_0 (HomePage.template.js:201)
    at view.js:375
    at dom_renderer.js:254
    at dom_events.js:27
    at ZoneDelegate.invoke (zone.js:323)
    at Object.onInvoke (ng_zone_impl.js:53)
    at ZoneDelegate.invoke (zone.js:322)
    at Zone.runGuarded (zone.js:230)
    at NgZoneImpl.runInnerGuarded (ng_zone_impl.js:86)

However I dont get any compiler errors via the IDE or in the compile time 😞, any help would be much appreciated.

Please note this the extended / more detailed version of my previous question

Upvotes: 0

Views: 872

Answers (1)

sebaferreras
sebaferreras

Reputation: 44659

Instead of using Camanjs... try with this:

Caman('#my-image', function () {
  // ...
});

So replacing Camanjs by just Caman should allow you to call the methods on that library.

Upvotes: 1

Related Questions