How do I write an ionic alert component once for the entire application?

Question

This is an design-approach question. I don't (yet) have broken code. ;-)

I have a firestore connected ionic/angular app with multiple modules. Users frequently move from page-to-page/module to module throughout usage.

Another part of my system drops new elements into the Firestore database in response to external events. I want to generate a new message on the screen whenever a new entry appears in the Firestore database regardless of which module/page is currently being presented to the user..

It seems from my research that I have to create an alert or popover or overlay component, and then include that component in every module and place it in every template file in order for the message to appear. There doesn't seem to be a way to write an overlay component that will shove itself over whatever else is being presented whenever there is an appropriate trigger.

Is there a way implement an overlay/alert/popover once at the app level without writing code to handle a potential overlay/popover/alert in every module?

--Paul

user_15439733 · Answer

Could make use of snackbar as a service. Configure the styling of the modal, pass in data for the modal (custom messages etc). https://material.angular.io/components/snack-bar/examples

MatSnackBar is an angular directive that’s used for showing a notification bar specifically on the mobile devices. These types of UI components are generally used several times. So to avoid the repetition of code, a service can simply be created to use SnackBar in different components.

To create a service you have to use the following command: ng g s snackBar Now import MatSnackBar from @angular/core and define the function openSnackBar (you can always use a different name).

Service

import { Injectable } from '@angular/core';
import {MatSnackBar} from '@angular/material/snack-bar';

@Injectable({
  providedIn: 'root'
})
export class SnackBarService {
  
//create an instance of MatSnackBar
  
  constructor(private snackBar:MatSnackBar) { }
  
/* It takes three parameters 
    1.the message string 
    2.the action 
    3.the duration, alignment, etc. */
  
  openSnackBar(message: string, action: string) {
    this.snackBar.open(message, action, {
       duration: 2000,
    });
  }
}

Import the snackBarService and inject it inside the constructor of the component, in which you want to use the Snackbar. This will create an instance of the service say snackBService. Now call the openSnackBar function wherever it is required, with the help of snackBService.

Component

import { Component, OnInit } from '@angular/core';
import {SnackBarService} from '../snack.service';
  
  
@Component({
  selector: 'app-profile',
  templateUrl: './snackBar.html',
  styleUrls: ['./snackBar.css']
})
export class SnackBar {
  
  // create an instance of SnackBarService 
  
  constructor(private snackBService:SnackBarService) { }
  
  //defining method for display of SnackBar
  
  trigger(message:string, action:string)
  {
   this.snackBService.openSnackBar(message, action);
  }
  
}

By repeating these steps we can use the snackBar inside any component. Example:

How do I write an ionic alert component once for the entire application?

1 Answers