Angular MDBootstrap Alerts Component
Last Updated :
02 Mar, 2022
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.
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 =
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/
Share your thoughts in the comments
Please Login to comment...