Componente de alertas de Angular MDBootstrap

MDBootstrap es una biblioteca de interfaz de usuario angular basada en diseño de materiales y bootstrap que se utiliza para crear páginas web atractivas con su componente sencillo y fácil de usar. En este artículo, sabremos cómo usar el componente de alertas en Angular MDBootstap. 

El componente de alertas se utiliza para proporcionar mensajes de comentarios contextuales para las acciones típicas de los usuarios que muestran un peso emocional a la información con el uso de colores específicos.

Sintaxis:

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

Acercarse:

• Descarga Angular MDBootstrap desde el sitio oficial .
• Extraiga los archivos al directorio de trabajo actual.
• Instale npm en el proyecto actual usando el siguiente comando:

npm install

• Después de crear la carpeta de su proyecto, es decir , el nombre de la aplicación, acceda a ella con el siguiente comando:

cd appname

• Inicie el servidor con el siguiente comando:

ng serve

Estructura del proyecto: después de la instalación completa, tendrá el siguiente aspecto:

Estructura del proyecto

Ejemplo 1 : este es el ejemplo básico que ilustra cómo usar el componente Alertas en Angular MDBootstrap.

<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>

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

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{}

Producción:

Componente de alertas de Angular MDBootstrap

Ejemplo 2: Este ejemplo ilustra la adición de contenido adicional de alerta con color de enlace de alerta en Angular MDBootstrap.

• aplicación.componente.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>

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

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{}

Producción:

Agregar alerta de contenido adicional en Angular MDBootstrap

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