Working with ngx-bootstrap alerts in Angular 8

In this article, we’ll be working with tabs in ngx-bootstrap library.

If you’re completely new to ngx-bootstrap layouts, you can check out these two posts:

• How to prototype Bootstrap layouts with Angular 8, part 1
• How to prototype Bootstrap layouts with Angular 8, part 2

Adding an alert

Photo by Jon Tyson, @jontyson on Unsplash

We’ll start by looking at a completed example in Stackblitz.

We’ll also need to make sure that ngx-bootstrap is added, as explained here.

After that, we’ll add an external Bootstrap css file via CDN, as explained here.

To see the code of our app now, have a look at this Github commit.

In the next section, we’ll be adding our alerts.

Step 2: Implementing alerts in ngx-bootstrap

First, we’ll visit the ngx-bootstrap alerts example and copy the code from this link.

Next, let’s make a new folder, call it alerts, and add a new file, called alerts.component.html, where we’ll simply paste in the code copied from the above-referenced site:

1
2
3
<div *ngFor="let alert of alerts">
  <alert [type]="alert.type"><span [innerHtml]="alert.msg"></span></alert>
</div>

Besides the template, our component also needs a Typescript file, so we can export our component class:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import { Component, SecurityContext } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
 
@Component({
  selector: 'demo-alert-dynamic-html',
  templateUrl: './dynamic-html.html'
})
export class DemoAlertDynamicHtmlComponent {
  alerts: any = [
    {
      type: 'success',
      msg: `<strong>Well done!</strong> You successfully read this important alert message.`
    },
    {
      type: 'info',
      msg: `<strong>Heads up!</strong> This alert needs your attention, but it's not super important.`
    },
    {
      type: 'danger',
      msg: `<strong>Warning!</strong> Better check yourself, you're not looking too good.`
    }
  ];
 
  constructor(sanitizer: DomSanitizer) {
    this.alerts = this.alerts.map((alert: any) => ({
      type: alert.type,
      msg: sanitizer.sanitize(SecurityContext.HTML, alert.msg)
    }));
  }
}

We’re not gonna add these two optional files:

• alerts.component.css (an optional component CSS file)
• alerts.component.spec.ts (a unit-testing file)

The app at this stage can be found in this project’s Github repo, under the commit message: Add alerts/ and its *.ts and *.html files.

Next, we’ll plug in our alerts into AppComponent.

Step 3: Show the AlertsComponent inside the AppComponent

In this step, we’ll add the alerts component.

Our DemoAlertDynamicHtmlComponent selector is demo-alert-dynamic-html, so we will add a custom HTML element, <demo-alert-dynamic-html>, to our AppComponent template file. At the top of app.component.html, add this line of code:

<demo-alert-dynamic-html></demo-alert-dynamic-html>

Adding the above code will result in the following error:

Template parse errors:
'demo-alert-dynamic-html' is not a known element:
1. If 'demo-alert-dynamic-html' is an Angular component, then verify that it is part of this module.

What this means is, we also need to add the DemoTabsManualSelectionComponent to a module, and since we only have one module, AppModule, we’ll be adding it there, by updating its declarations array:

declarations: [ AppComponent, HelloComponent, DemoAlertDynamicHtmlComponent ],

We should also import our DemoAlertDynamicHtmlComponent to app.module.ts. At the bottom of the list of imports, add the following line:

import { DemoAlertDynamicHtmlComponent } from './alerts/alerts.component';

Once we save our changes, we’ll see this error:

Import error, can't find file:
./dynamic-html.html

To fix it, we’ll update line 6 of app.component.ts, to this code:

templateUrl: './alerts.component.html'

Now, we’ll get another error:

Template parse errors:
Can't bind to 'type' since it isn't a known property of 'alert'. ("<div *ngFor="let alert of alerts">
<alert [ERROR ->][type]="alert.type"><span [innerHtml]="alert.msg"></span></alert>

This means that we need to import the AlertModule into AppModule, and we need to consume it in the AppModule with the help of AlertModule’s forRoot() method:

// ... code skipped for brevity ...

import { AlertModule } from 'ngx-bootstrap/alert';

// ... code skipped for brevity ...

  imports:      [ BrowserModule, FormsModule, AlertModule.forRoot() ],

Once we’ve fixed all the errors above as described, we’ll see the following screen:

The app at this stage is available in the commit titled Successfully added alerts.

Making our alerts dismissible

To make alerts dismissible, we’ll update our alerts.component.ts, by adding a varible right under the export statement:

export class DemoAlertDynamicHtmlComponent {
  dismissible = true;

Now it’s just a matter of binding the above variable to the [dismissible] DOM property inside our component template (alerts.component.html):

<alert [type]="alert.type" [dismissible]="dismissible"><span [innerHtml]="alert.msg"></span></alert>

Now our alerts have nice “X” icons on their right side, as seen below:

With this, our app is fully finished, you can check out the Github commit for this update here.