Create Reusable Progress Bar Component in Ionic 5

Last updated on by Digamber
This is a step by step tutorial about creating a reusable progress bar component in an Ionic 5 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 5 App

Use command to install Ionic CLI on your development system.

sudo npm install -g cordova ionic/cli

Create a new blank Ionic 5 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

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;

  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 5.

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. However, the 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 5

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.