Source: https://jasonwatmore.com

Date: 2020-02-08

List of necessary files

To add alerts to your Angular 8 application you’ll need to copy the /src/app/_alert folder and contents from the example project, the folder contains the alert module and associated files, including:

• alert.component.html - alert component template that contains the html for displaying alerts.
• alert.component.ts - alert component with the logic for displaying alerts.
• alert.model.ts - alert model class that defines the properties of an alert, it also includes the AlertType enum that defines the different types of alerts.
• alert.module.ts - alert module that encapsulates the alert component so it can be imported by the app module.
• alert.service.ts - alert service that can be used by any angular component or service to send alerts to alert components.
• index.ts - barrel file that re-exports the alert module, service and model so they can be imported using only the folder path instead of the full path to each file, and also enables importing from multiple files with a single import.

Import the Alert Module into your App Module

To make the alert component available to your Angular 8 application you need to add the AlertModule to the imports array of your App Module (app.module.ts). See the app module from the example app below, the alert module is imported on line 4 and added to the imports array of the app module on line 14.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AlertModule } from './_alert';
import { appRoutingModule } from './app.routing';

import { AppComponent } from './app.component';
import { HomeComponent } from './home';
import { MultiAlertsComponent } from './multi-alerts';

@NgModule({
    imports: [
        BrowserModule,
        AlertModule,
        appRoutingModule
    ],
    declarations: [
        AppComponent,
        HomeComponent,
        MultiAlertsComponent
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Add the tag where you want alerts to be displayed

Add the alert component tag wherever you want alert messages to be displayed. The alert component accepts an optional id attribute if you want to display multiple alerts in different locations (see the Multiple Alerts page in the example above). An alert component instance with an id will display any messages sent to the alert service with the same alertId specified, e.g. alertService.error(‘something broke!’, ‘alert-1’); will send an error message to the alert component with id=“alert-1”.

The app component template in the example /src/app/app.component.html contains a global alert tag without an id above the router-outlet tag, this alert instance displays any messages sent to the alert service without an alertId specified, e.g. alertService.success(‘you won!’); will send a success message to the global alert without an id.

<!-- main app container --><div class="jumbotron">    <div class="container text-center">        <alert></alert>        <router-outlet></router-outlet>    </div></div>

Displaying Alert / Toaster Notifications in Your Angular 8 App

Once you’ve added support for alerts / toaster notifications to your app by following the previous steps, you can trigger alert notifications from any component in your application by simply injecting the alert service and calling one of it’s methods for displaying different types of alerts: success(), error(), info() and warn().

Here is the home component from the example app that contains methods that pass example notification messages to the alert service when each of the buttons is clicked. In a real world application alert notifications can be triggered by any type of event, for example an error from an http request or a success message after a user profile is saved.