CODEWITHSUNDEEP
javascriptjqueryangulartypescript
Amaury Laroze
Amaury Laroze

Reputation: 217

Use external lib with Angular

I want to use this lib in my app : https://www.npmjs.com/package/jquery-animated-headlines

But i don't know how to import it.

First, i add these lines in my angular-cli.json

"styles": [
    ...
    "../node_modules/jquery-animated-headlines/dist/css/jquery.animatedheadline.css"
  ],
  "scripts": [
    ...
    "../node_modules/jquery-animated-headlines/dist/js/jquery.animatedheadline.min.js"
  ]

Second, i install jquery npm install jquery --save

Then, i import jquery : import * as $ from 'jquery';

Finally i copy/paste their example :

TS :

constructor () {
   $(function() {
     $('.selector').animatedHeadline();
   })
}

HTML :

<div class="selector">
  <h1 class="ah-headline">
    <span>My favorite food is</span>
    <span class="ah-words-wrapper">
        <b class="is-visible">pizza</b>
        <b>sushi</b>
        <b>steak</b>
    </span>
  </h1>
</div>

I get this error : Uncaught TypeError: $(...).animatedHeadline is not a function

I don't know what i'm doing wrong ... Thanks

Upvotes: 1

Views: 185

Answers (2)

peinearydevelopment
peinearydevelopment

Reputation: 11474

Here is how I got it to work, but there must be a better way. I created a new project using @angular/cli version6.

npm install --save jquery jquery-animated-headlines

In the angular.json file, add "node_modules/jquery-animated-headlines/dist/css/jquery.animatedheadline.css" to the styles array.

Update the app.component.html to:

<h2 #foo>Here are some links to help you start: </h2>

app.component.ts

import { Component, AfterContentInit, ViewChild, ElementRef } from '@angular/core';

import * as jQuery from 'jquery';
import 'jquery-animated-headlines';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterContentInit {
  @ViewChild('foo') fooElement: ElementRef<any>;

  ngAfterContentInit(): void {
    $(this.fooElement.nativeElement).animatedHeadline();
  }
}

Now things should work at this point, but don't seem to due to the way that the plugin library is written. I also had to go into the node_modules/jquery-animated-headlines/dist/js/jquery.animatedhealdine.js file and update the way that it is importing jquery.

The file comes looking like:

(function($) {
  .
  .
  .
}(jQuery));

and I had to update it to:

(function (factory) {
    "use strict";
    if (typeof define === 'function' && define.amd) {
        define(['jquery'], factory);
    }
    else if(typeof module !== 'undefined' && module.exports) {
        module.exports = factory(require('jquery'));
    }
    else {
        factory(jQuery);
    }
}(function ($, undefined) {
  .
  .
  .
}));

I'm not sure if there is a better way to handle this in Angular and this won't work well with an automated build system, but for local development it should work fine.

UPDATE

The way to get this working in your application is as follows.

In the angular.json file add:

"node_modules/jquery/dist/jquery.js",
"node_modules/jquery-animated-headlines/dist/js/jquery.animatedheadline.js"

to the scripts property.

In your component, use declare var $: any;. For example:

import { Component, AfterContentInit, ViewChild, ElementRef } from '@angular/core';

declare var $: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterContentInit {
  @ViewChild('foo') fooElement: ElementRef<any>;

  ngAfterContentInit(): void {
    $(this.fooElement.nativeElement).animatedHeadline();
  }
}

GitHub repo.

Upvotes: 1

Eliya Cohen
Eliya Cohen

Reputation: 11508

You don't need to include your libs in angular.json. Import it just where u need it.

First, install the packages:

npm install jquery jquery-animated-headlines --save

Then, go to the desired component and import them:

import * as $ from 'jquery' // in case u haven't imported it globally.
import * as animatedHeadline from 'jquery-animated-headlines;


@Component()
...
constructor () {
    $(document).ready(() => $('.selector').animatedHeadline())
}

Upvotes: 1

Related Questions