Create a Custom Ionic Alert with Progress Bar using Ionic 7 and Angular

Are you tired of using the default Ionic alert that lacks the ability to showcase progress? Well, you’re in luck! In this article, we’ll guide you through the process of creating a custom Ionic alert with a progress bar using Ionic 7 and Angular.

Why Create a Custom Alert?

Before we dive into the implementation, let’s discuss why creating a custom alert is essential. The default Ionic alert is, well, basic. It doesn’t provide any visual feedback to the user about the progress of the task being executed. Imagine a scenario where your app is processing a large amount of data, and the user is left wondering what’s happening. A custom alert with a progress bar can alleviate this situation by providing a smooth and intuitive user experience.

Prerequisites

To follow along with this tutorial, you’ll need:

• Ionic 7 installed on your system
• An existing Ionic 7 project created using Angular
• A basic understanding of HTML, CSS, and TypeScript
• A code editor or IDE of your choice

Creating the Custom Alert Component

Create a new folder named alert inside your project’s src/app/components directory. Inside the alert folder, create two new files: alert.component.ts and alert.component.html.

src/app/components/alert
alert.component.ts
alert.component.html

alert.component.ts

In this file, we’ll define the component class that will handle the logic for our custom alert.

import { Component, ElementRef } from '@angular/core';
import { IonicModule } from '@ionic/angular';

@Component({
  selector: 'app-alert',
  templateUrl: './alert.component.html',
  styleUrls: ['./alert.component.css']
})
export class AlertComponent {
  progressBarValue = 0;
  progressBarMaxValue = 100;
  alertMessage = '';
  alertTitle = '';

  constructor(private elementRef: ElementRef) { }

  ngAfterViewInit() {
    // Add event listener to close the alert when the user clicks outside
    this.elementRef.nativeElement.addEventListener('click', (event: any) => {
      if (event.target.className.includes('alert-container')) {
        this.closeAlert();
      }
    });
  }

  /**
   * Updates the progress bar value
   * @param value The new progress bar value
   */
  updateProgressBarValue(value: number) {
    this.progressBarValue = value;
  }

  /**
   * Closes the alert
   */
  closeAlert() {
    // Add your logic to close the alert here
  }
}

alert.component.html

In this file, we’ll define the HTML structure for our custom alert.

<div class="alert-container">
  <div class="alert-header">
    <h2>{{ alertTitle }}</h2>
  </div>
  <div class="alert-message">
    <p>{{ alertMessage }}</p>
  </div>
  <div class="progress-bar-container">
    <progress [value]="progressBarValue" [max]="progressBarMaxValue"></progress>
    <span>{{ progressBarValue }}%</span>
  </div>
  <div class="alert-actions">
    <button (click)="closeAlert()">Close</button>
  </div>
</div>

Using the Custom Alert Component

Now that we’ve created our custom alert component, let’s use it in our app. Create a new file named alert.service.ts inside your project’s src/app/services directory.

src/app/services
alert.service.ts

alert.service.ts

In this file, we’ll define a service that will handle the creation and management of our custom alerts.

import { Injectable } from '@angular/core';
import { AlertComponent } from '../components/alert/alert.component';

@Injectable({
  providedIn: 'root'
})
export class AlertService {
  private alertComponent: AlertComponent;

  constructor(private componentFactoryResolver: ComponentFactoryResolver,
              private applicationRef: ApplicationRef,
              private injector: Injector) { }

  /**
   * Shows a new alert
   * @param title The alert title
   * @param message The alert message
   * @param progressBarMaxValue The maximum value for the progress bar
   */
  showAlert(title: string, message: string, progressBarMaxValue: number) {
    // Create a new instance of the alert component
    this.alertComponent = this.createComponent(AlertComponent);

    // Set the alert title and message
    this.alertComponent.alertTitle = title;
    this.alertComponent.alertMessage = message;
    this.alertComponent.progressBarMaxValue = progressBarMaxValue;

    // Add the alert component to the app
    this.applicationRef.attachView(this.alertComponent.hostView);
    this.injector.get(APP_initializer, this.applicationRef).add(this.alertComponent.hostView);

    // Focus the alert
    this.alertComponent.elementRef.nativeElement.focus();
  }

  /**
   * Updates the progress bar value for the current alert
   * @param value The new progress bar value
   */
  updateProgressBarValue(value: number) {
    if (this.alertComponent) {
      this.alertComponent.updateProgressBarValue(value);
    }
  }

  /**
   * Closes the current alert
   */
  closeAlert() {
    if (this.alertComponent) {
      this.alertComponent.closeAlert();
      this.applicationRef.detachView(this.alertComponent.hostView);
      this.injector.get(APP_initializer, this.applicationRef).remove(this.alertComponent.hostView);
    }
  }

  private createComponent(component: any) {
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(component);
    const componentRef = componentFactory.create(this.injector);
    return componentRef.instance;
  }
}

Using the Alert Service

Finally, let’s use our alert service in a sample page component. Create a new file named home.page.ts inside your project’s src/app/pages directory.

src/app/pages
home.page.ts

home.page.ts

In this file, we’ll define a sample page component that will use our alert service.

import { Component, OnInit } from '@angular/core';
import { AlertService } from '../../services/alert.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.css']
})
export class HomePage implements OnInit {
  constructor(private alertService: AlertService) { }

  ngOnInit(): void {
    this.demoAlert();
  }

  demoAlert() {
    this.alertService.showAlert('Custom Alert', 'This is a custom alert with a progress bar!', 100);

    // Simulate a task that takes 5 seconds to complete
    setTimeout(() => {
      for (let i = 0; i <= 100; i++) {
        this.alertService.updateProgressBarValue(i);
        // Add a delay to simulate the task
        setTimeout(() => {}, 50);
      }

      // Close the alert after the task is complete
      this.alertService.closeAlert();
    }, 1000);
  }
}

Conclusion

And that’s it! With these steps, you’ve successfully created a custom Ionic alert with a progress bar using Ionic 7 and Angular. You can now use this alert component throughout your app to provide a better user experience.

Remember to style your alert component as per your app’s design requirements.

Bonus: Animated Progress Bar

If you want to add an animated effect to your progress bar, you can use CSS animations. Add the following CSS to your alert.component.css file:

.progress-bar-container progress {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 10px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
}

.progress-bar-container progress[value] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 10px;
  background-color: #4CAF50;
  border: 1px solid #ddd;
}

.progress-bar-container progress[value]::-webkit-progress-bar {
  background-color: #f0f0f0;
  border-radius: 10px;
}

.progress-bar-container progress[value]::-webkit-progress-value {
  background-color: #4CAF50;
  border-radius: 10px;
  transition: width 0.5s ease-in-out;
}

This will add a smooth animation to your progress bar as it updatesHere are 5 questions and answers about creating a custom Ionic alert with a progress bar using Ionic 7 and Angular:

Frequently Asked Question

Get the most out of Ionic 7 and Angular by creating a stunning custom alert with a progress bar. Here are some frequently asked questions to get you started!