Angular MDBootstrap Alerts Component

Last Updated : 12 Apr, 2025

MDBootstrap is a Material Design and bootstrap-based Angular UI library that is used to make attractive webpages with its seamless and easy-to-use component. In this article, we will know how to use Alerts Component in Angular MDBootstap.

The Alerts Component is used to provide contextual feedback messages for typical user actions that depicts an emotional weight to the information with use of the specific colors.

Syntax:

<div class="alert alert-primary">Content</div

Approach:

Download Angular MDBootstrap from the official site.
Extract the files to the current working directory.
Install npm in the current project using the following command:

npm install

After creating your project folder i.e. appname, move to it using the following command:

cd appname

Start the server using the following command:

ng serve

Project Structure: After complete installation, it will look like the following:

Example 1: This is the basic example that illustrates how to use the Alerts component in Angular MDBootstrap.

app.component.html

<div id='gfg'>
    <h2>GeeksforGeeks</h2>
    <h4>Angular MDBootstrap Alerts Component</h4>
    <br />
    <div class="alert alert-primary">GeeksforGeeks</div>
    <div class="alert alert-secondary">GeeksforGeeks</div>
    <div class="alert alert-success">GeeksforGeeks</div>
    <div class="alert alert-danger">GeeksforGeeks</div>
    <div class="alert alert-warning">GeeksforGeeks</div>
    <div class="alert alert-info">GeeksforGeeks</div>
    <div class="alert alert-light">GeeksforGeeks</div>
    <div class="alert alert-dark">GeeksforGeeks</div>
</div>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent{}

app.module.ts

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

import { AppComponent } from './app.component';
import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MDBBootstrapModule.forRoot(),
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule{}

Output:

Example 2: This example illustrating the addition of alert additional content with alert link color in Angular MDBootstrap.

app.component.html:

HTML

<div id="gfg">
    <br />
    <div class="alert alert-primary">
        <h2 class="alert-heading">GeeksforGeeks</h2>
        <h4>Angular MDBootstrap Alerts Component</h4>
        <hr>
        <p>
            <a href=
"https://mdbootstrap.com/docs/angular/" 
               class="alert-link">MDBootstrap</a> 
               is a Material Design and bootstrap-based 
               Angular UI library that is used to make
               attractive webpages with its seamless and 
               easy-to-use component. It is a popular UI KIT 
               for building responsive, mobile-first websites 
               and apps. 
        </p>
    </div>
</div>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent{}

app.module.ts

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

import { AppComponent } from './app.component';
import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MDBBootstrapModule.forRoot(),
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule{}

Output:

Adding Alert additional content in Angular MDBootstrap

Angular MDBootstrap Panels Component

taran910

Improve

Article Tags :

Angular MDBootstrap Alerts Component

Similar Reads

Thank You!

What kind of Experience do you want to share?