Angular ng bootstrap es un marco de arranque que se usa con angular para crear componentes con un gran estilo y este marco es muy fácil de usar y se usa para crear sitios web receptivos.
En este artículo, veremos cómo usar Toast en angular ng bootstrap. El componente Toast se usa para crear un componente que proporcionará mensajes de retroalimentación al usuario.
Sintaxis de instalación:
ng add @ng-bootstrap/ng-bootstrap
Acercarse:
- Primero, instale el bootstrap angular ng usando el comando mencionado anteriormente.
- Agregue el siguiente script en index.html
<enlace href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css” rel=”hoja de estilo”>
- Importe el módulo de arranque ng en module.ts
import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; imports: [ NgbModule ] - En app.component.html crea un componente de brindis.
- Sirve la aplicación usando ng serve.
Ejemplo 1: En este ejemplo, estamos haciendo un ejemplo básico de tostadas.
app.component.html
<ngb-toast [autohide]="false" id='gfg'> GeeksforGeeks Angular ng bootstrap </ngb-toast>
app.module.ts
import { NgModule } from '@angular/core';
// Importing forms module
import { FormsModule, ReactiveFormsModule }
from '@angular/forms';
import { BrowserModule }
from '@angular/platform-browser';
import { BrowserAnimationsModule }
from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { NgbModule }
from '@ng-bootstrap/ng-bootstrap';
@NgModule({
bootstrap: [
AppComponent
],
declarations: [
AppComponent
],
imports: [
FormsModule,
BrowserModule,
BrowserAnimationsModule,
ReactiveFormsModule,
NgbModule
]
})
export class AppModule { }
app.component.css
#gfg {
margin:40px
}
Producción:
Ejemplo 2: En este ejemplo, estamos haciendo un brindis con cabecera.
app.component.html
<ngb-toast [autohide]="false" id='gfg' header='GeeksforGeeks'> Angular ng bootstrap </ngb-toast>
app.module.ts
import { NgModule } from '@angular/core';
// Importing forms module
import { FormsModule, ReactiveFormsModule }
from '@angular/forms';
import { BrowserModule }
from '@angular/platform-browser';
import { BrowserAnimationsModule }
from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { NgbModule }
from '@ng-bootstrap/ng-bootstrap';
@NgModule({
bootstrap: [
AppComponent
],
declarations: [
AppComponent
],
imports: [
FormsModule,
BrowserModule,
BrowserAnimationsModule,
ReactiveFormsModule,
NgbModule
]
})
export class AppModule { }
app.component.css
#gfg {
margin:40px
}
Producción:
Referencia: https://ng-bootstrap.github.io/#/components/toast/overview