Create Reusable Progress Bar Component in Ionic 7

Last Updated on by in Ionic
This is a step by step tutorial about creating a reusable progress bar component in an Ionic application.In this tutorial, we are going to build a simple Progress Bar component, which we can use anywhere in our Ionic application. Creating a custom component in Ionic doesn’t take much time. Instead, it is straightforward and easy.

A progress bar is a graphical control element used to visualize the progression of an extended computer operation, such as a download, file transfer, or installation. Sometimes, the graphic is accompanied by a textual representation of the progress in a percent format.

wikipedia

Let’s start building a custom progress bar component, which we can use to display the progress for various actions.

This progress bar will have the percentage indicator that shows the users how much progress is being made.

We will add an option for the users so that anybody can set the value in the progress bar module and use it as per their needs.

Install Ionic App

Use command to install Ionic CLI on your development system.

sudo npm install -g cordova ionic/cli

Create a new blank Ionic Angular project. Skip this step if the Ionic setup is already configured.

ionic start ionic-scroll-progressbar blank --type=angular

Head over to project folder.

cd ionic-scroll-progressbar

Start the app.

ionic serve

Run the below command to add the native core package.

npm install @ionic-native/core --legacy-peer-deps

Disable Strict Type Errors

To avoid TypeScript compiling issues, we just need to open tsconfig.json file:

First, set below property under “compilerOptions” property.

"compilerOptions": {
    "strictPropertyInitialization": false,
    "skipLibCheck": true
    ...
}

Secondly, add given props under “angularCompilerOptions”.

"angularCompilerOptions": {
    "strictTemplates": false,
    ...
}

Create Progress Bar Component

Next, we need to use the given below command to generate the progress bar component in an Ionic app.

ionic g c component/progress-bar

The progress bar component shows the progress of a particular event to achieve this type of functionality we need to supply the dynamic value to our progress bar.

It ranges from 0 to 100 since we are building the specific component for the progress bar, so we need to send the progress bar value from the parent component to the child component.

So, we are going to use the @Input decorator, and it is used to transfer the metadata from the parent component to the child component in Angular.

Please do check out our detailed article on Components Data CommunicatioN using @Input Decorator in Angular.

The input property is bound to a DOM property in the template. During change detection, Angular automatically updates the data property with the DOM property’s value.

To use Input decorator, we require to import it from the angular core library:

import { Input } from ‘@angular/core’;

To receive the data from the parent component, we have to declare the @Input() method inside the progress bar component. Also define the value name that will accept the progression value from parent component.

@Input('progressValue') progressValue;

Open progress-bar.component.ts file and add the following code.

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-progress-bar',
  templateUrl: './progress-bar.component.html',
  styleUrls: ['./progress-bar.component.scss'],
})

export class ProgressBarComponent implements OnInit {
  @Input('progressValue') progressValue: any;

  constructor() {}

  ngOnInit() {}
}

Open progress-bar.component.html file and place the following code inside of it.

<div class="progress-wrapper">
    <div class="progress-bar" [style.width]="progressValue + '%'">
        {{progressValue}}%
    </div>
</div>

As you can see, we set the progressValue inside the style directive so that this value will display the progress for the custom progress bar in Ionic.

Style Progress Bar

Place the following code inside the progress-bar.component.scss file.

.progress-wrapper {
    width: 95%;
    color: #fff;
    margin: 15px 2.5%;
    text-align: center;
    background-color: #f7f7f7;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

.progress-bar {
    padding: 4px;
    min-width: 10%;
    overflow: hidden;
    white-space: nowrap;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    background-color: #f63a0f;
    transition: 2s linear;
    transition-property: width, background-color;
    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);    
}

Implement the Component

We have created the component, and now we can use it in any of the Ionic pages. But, In order to use it, you must import and declare it in your page.module.ts file.

Like we are using the home page for the demo so we will be importing and declaring inside the home.module.ts file.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { HomePageRoutingModule } from './home-routing.module';

import { HomePage } from './home.page';
import { ProgressBarComponent } from '../component/progress-bar/progress-bar.component'

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HomePageRoutingModule
  ],
  declarations: [HomePage, ProgressBarComponent]
})

export class HomePageModule {}

All the formalities are done, have to use the following code to display the progress bar.

You can use the given below syntax in any of your Ionic pages; however we are currently using it inside the home.page.html page.

<app-progress-bar [progressValue]="loadProgress"></app-progress-bar>

We set the static value to progressValue property. Following property represents the progress of any event, which makes the user wait for a certain period.

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss'],
})

export class HomePage {

  loadProgress = 77;

}

Here is the final result; you can check out the final code for this project on this Git repository.

Create Reusable Progress Bar Component in Ionic

Conclusion

Now, we can reuse this component throughout our project. Add the element in any of the Ionic pages, and display the progress to the users. Using a reusable component is considered to be a good practice.

Once you are familiar with the reusable concept, then there are better chances for you to make your code more manageable or flexible.

Digamber - Author positronX.io

Hi, I'm Digamber Singh, a New Delhi-based full-stack developer, tech author, and open-source contributor with 10+ years' experience in HTML, CSS, JavaScript, PHP, and WordPress.