Flipclock on Ionic 2

Question

I am trying to implement Flipclock 24-hours into my Ionic 2 application. I'm not sure if this could work as the js library is compatible with Ionic 2 in typescript. Hope anyone could enlighten me as I couldn't find any source about Flipclock in Ionic 2. Thanks.

Answer 1

You should check the docs to add third party libraries to ionic.

https://ionicframework.com/docs/developer-resources/third-party-libs/

But you can start with:

npm install jquery --save
npm install @types/jquery --save
npm install flipclock --save

Then create a component to hold this logic and use it, to make the FlipClock lib work you will need the ElementRef, because the plugin needs the HTMLElement to create the clock.

So you will have something like this:

import { Component, ElementRef, OnInit } from '@angular/core';
import * as $ from 'jquery'

@Component({
   selector: 'my-clock',
   template: ''
})
export class MyClockComponent implements OnInit {

   constructor(public elementRef: ElementRef) {}

   ngOnInit() {
      // If you have TS issues here add a cast like (<any>$(this.elementRef).FlipClock
      $(this.elementRef).FlipClock({
        clockFace: 'TwentyFourHourClock'
    });
   }
}

That should do the work.

Update:

Add a custom copy config to be sure that your third party lib will be available in runtime.

• Create a config folder in the project.
• Create a file inside of the config folder named copy.config.js.

Add this to your copy.config.js file:

// this is a custom dictionary to make it easy to extend/override
// provide a name for an entry, it can be anything such as 'copyAssets' or 'copyFonts'
// then provide an object with a `src` array of globs and a `dest` string
module.exports = {
  copyAssets: {
    src: ['{{SRC}}/assets/**/*'],
    dest: '{{WWW}}/assets'
  },
  copyIndexContent: {
    src: ['{{SRC}}/index.html', '{{SRC}}/manifest.json', '{{SRC}}/service-worker.js'],
    dest: '{{WWW}}'
  },
  copyFonts: {
    src: ['{{ROOT}}/node_modules/ionicons/dist/fonts/**/*', '{{ROOT}}/node_modules/ionic-angular/fonts/**/*'],
    dest: '{{WWW}}/assets/fonts'
  },
  copyPolyfills: {
    src: [`{{ROOT}}/node_modules/ionic-angular/polyfills/${process.env.IONIC_POLYFILL_FILE_NAME}`,
          `{{ROOT}}/node_modules/flipclock/compiled/flipclock.min.js`],
    dest: '{{BUILD}}'
  },
  copySwToolbox: {
    src: ['{{ROOT}}/node_modules/sw-toolbox/sw-toolbox.js'],
    dest: '{{BUILD}}'
  }
}

In your package.json add this:

"config": {
   "ionic_copy": "./config/copy.config.js"
} 

Then add the flipclock.min.js script to your index.html file (after your build/main.js script):

<script src="build/flipclock.min.js"></script>