Ionic 5|4 Sliding Number Counter using ng2-odometer

The numbers figures in the Ionic/ Angular application can be converted into an animated sliding counter. The ng2-odometer module adds a pinch of awesomeness to numbers by showing them in an incremental and animated way.

In this post, we will discuss an awesome plugin which can be added to any reactive application including Angular Web App or Angular based Ionic App. After adding this the simple number will look something like this

Ionic 5|4 Sliding Number Counter using ng2-odometer

#Setup Ionic CLI

Ionic application are created using Ionic CLI tool, for that you need to install NodeJs on your system. To most recommended IDE is Visual Studio Code you can download it from here.

After successfully installing NodeJs, open VS Code then open a terminal window by hitting shortcuts Ctr+` or simply go to the top menu then click View > Terminal

Next, install the Ionic CLI package by running below npm command in the terminal

$ npm install -g @ionic/cli

This will install the @ionic/cli package globally in your system.

 

#Create new Ionic 5 application

Now we will create a new Ionic 5 application with the Angular framework using a blank template to keep the tutorial simple. Run following ionic command to create a new application

$ ionic start ionic-counter-app blank --type=angular

After creating the app, move to the app folder

$ cd ionic0counter-app

then open the app in the VS Code by hitting below shortcut command

$ code .

 

#Install the ng2-odometer package

After successfully creating the application, we will install the ng2-odometer package in the application. Run the following command to install the package

$ npm install ng2-odometer --save

 

#Import Odometer Module in Home Page

Now we'll add an Odometer counter in the Home page. As in the latest version of Angular application, every page has it's own module so we need to import the Ng2OdometerModule class in the module of the page itself.

Here in the blank template Ionic application, we have a Home page. So open the home.module.ts file them import the Ng2OdometerModule then add in the imports array as shown below:

// home.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';

import { Ng2OdometerModule } from 'ng2-odometer';

import { HomePage } from './home.page';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild([
      {
        path: '',
        component: HomePage
      }
    ]),

    Ng2OdometerModule.forRoot()
  ],
  declarations: [HomePage]
})
export class HomePageModule { }

Now we are open to using the <ng2-odometer> directive in the page HTML template to create a new odometer counter.

 

#Adding the Odometer

Now open the home.page.html file, and add the <ng2-odometer> template with [number] property as shown below

  <h4>Speed of Light(Km/s)</h4>
  <ng2-odometer [number]="speed_of_light"></ng2-odometer>

In the class file, home.page.ts just add the variable value

export class HomePage {

  speed_of_light = 299792

}

Ionic 5|4 Sliding Number Counter using ng2-odometer

Let's have a look at configurations available

#Configuration Options

Following are options available to configure ng2-odometer

We can define [config] property

<ng2-odometer [number]="random_number" [config]="{theme:'default'}"></ng2-odometer>

or

<ng2-odometer [number]="random_number" [config]="config"></ng2-odometer>

export class HomePage {
  public config = {
    animation: 'count', 
    format: 'd', 
    theme: 'car', 
    value: 50,
    auto: true,
  }
}

 

#Themes

Options: 'default', 'minima', 'digital', 'car', 'plaza', 'slot-machine', 'train-station'

Ionic 5|4 Sliding Number Counter using ng2-odometer

animation: Animation effect type. 'slide'(default), 'count'

format: Default is '(,ddd)' Example:
(,ddd) - 12,345,678
(,ddd).dd - 12,345,678.09
(.ddd),dd - 12.345.678,09

 

value: The initial value of the odometer

auto: Setup auto or manual mode for the odometer

That's it now you can run your app by hitting $ ionic serve --open

So here we discussed how we can animate number with a sliding effect using the ng2-odometer plugin library.

 

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments