I managed to make it work with the following steps, although I believe there is room for improvement. Initially, I set up a new project using @angular/cli version 6.
npm install --save jquery jquery-animated-headlines
Next, in the angular.json file, I included
"node_modules/jquery-animated-headlines/dist/css/jquery.animatedheadline.css"
in the styles array.
Then, I updated the content of app.component.html to:
<h2 #foo>Here are some links to help you start: </h2>
Included code from 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();
}
}
Although things appeared to be working at this point, they didn't due to how the plugin library was written. I needed to manually update the import of jquery in the
node_modules/jquery-animated-headlines/dist/js/jquery.animatedhealdine.js
file.
The original code looked like this:
(function($) {
.
.
.
}(jQuery));
I modified 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) {
.
.
}));
While this solution may not be ideal and might not integrate smoothly with an automated build system, it should suffice for local development purposes.
UPDATE:
To implement this in your application, follow these steps:
Add the following entries to the scripts property in the angular.json file:
"node_modules/jquery/dist/jquery.js",
"node_modules/jquery-animated-headlines/dist/js/jquery.animatedheadline.js"
In your component, declare var $: any;. For instance:
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();
}
}
Check out the GitHub repo for more details.