JSBAngularFlipClock

• A simple Number Counter Commponent to be used with Angular.
• It is developed using Angular >=8.0.0 and its newly introduced ng g library schematics.
• This library is part of JSBNumberCounter project and it is generated with Angular CLI version 8.3.21.
• Library location: projects/jsb-angular-flip-clock directory of this repository.

Examples/Demo

• A simple Example can be found under src/app directory of this repository.

Installation

npm i jsb-angular-flip-clock

Demo

App Demo

API

import { JSBAngularFlipClockModule } from 'jsb-angular-flip-clock'
selector: JSB-flipclock

@Inputs()

Input	Type	Required	Description
HoursTensPlace	number	YES	the Number Data to be disaplayed.
HoursOnesPlace	number	YES	the Number Data to be disaplayed.
MinutesTensPlace	number	YES	the Number Data to be disaplayed.
MinutesOnesPlace	number	YES	the Number Data to be disaplayed.
SecondsTensPlace	number	YES	the Number Data to be disaplayed.
SecondsOnesPlace	number	YES	the Number Data to be disaplayed.

Usage

1. Register the JSBNumCounterModule in your app module.

import { JSBAngularFlipClockModule } from 'jsb-angular-flip-clock'

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { JSBAngularFlipClockModule } from 'projects/jsb-angular-flip-clock/src/public-api';
 
@NgModule({
 declarations: [
   AppComponent
 ],
 imports: [
   BrowserModule,
   AppRoutingModule,
   JSBAngularFlipClockModule
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

1. Use the selector (JSBNumCounter) in your component.

import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-root',
  template: `
  <JSB-flipclock 
 
 
[HoursTensPlace]='HoursTensPlace'
[HoursOnesPlace]='HoursOnesPlace'
[MinutesTensPlace]='MinutesTensPlace'
[MinutesOnesPlace]='MinutesOnesPlace'
[SecondsTensPlace]='SecondsTensPlace'
[SecondsOnesPlace]='SecondsOnesPlace'
 
></JSB-flipclock>`,
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'angular-flip-clock';
  HoursTensPlace: number = 0;
  HoursOnesPlace: number = 0;
  MinutesTensPlace: number = 0;
  MinutesOnesPlace: number = 0;
  SecondsTensPlace: number = 0;
  SecondsOnesPlace: number = 0;
  ngOnInit() {
 
    setInterval
      (_ => {
        this.HoursTensPlace=Math.floor(Math.random() * 9) + 1;
        this.HoursOnesPlace=Math.floor(Math.random() * 9) + 1;
        this.MinutesTensPlace=Math.floor(Math.random() * 9) + 1;
        this.MinutesOnesPlace=Math.floor(Math.random() * 9) + 1;
        this.SecondsTensPlace=Math.floor(Math.random() * 9) + 1;
        this.SecondsOnesPlace=Math.floor(Math.random() * 9) + 1;
 
      }, 1000);
 
  }
}