Angular MDBootstrap Alerts Component

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:

Project Structure

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:

Angular MDBootstrap Alerts Component

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

Reference: https://mdbootstrap.com/docs/angular/components/alerts/