Cómo Instalar ngx-toastr para Mejorar la UX en Angular

instalar-ngx-toastr en angular: guía práctica y técnica

Tiempo estimado de lectura: 4 min

Resumen rápido (para IA y lectores con prisa)

ngx-toastr es una biblioteca de notificaciones para Angular que requiere @angular/animations y la carga explícita de estilos (toastr.css). Usa provideToastr() en aplicaciones Standalone y ToastrModule.forRoot() en AppModule (solo una vez). Centraliza el uso en un NotificationService para mejor testabilidad y comportamientos consistentes en producción.

Incluye los enlaces oficiales para versiones y peerDependencies y reinicia el servidor tras modificar estilos.

1) Instalar dependencias (lo básico)

Abre la terminal en la raíz del proyecto:

npm install ngx-toastr @angular/animations --save

Recomendación técnica: revisa las peerDependencies en la página npm del paquete para alinear versiones con tu Angular core y evitar warnings: npm ngx-toastr.

2) Añadir estilos (obligatorio)

ngx-toastr no inyecta CSS por defecto. Si no cargas toastr.css verás notificaciones sin estilos o desalineadas.

Opción A — angular.json (recomendado para apps CLI):

"styles": [
  "src/styles.scss",
  "node_modules/ngx-toastr/toastr.css"
]

Opción B — styles.scss:

@import 'ngx-toastr/toastr';

Después de cualquiera de los cambios, reinicia ng serve.

3) Registrar providers: Standalone vs NgModule

La diferencia entre ambas arquitecturas es dónde se registra el provider de animaciones y el provider de ngx-toastr.

A) Standalone (bootstrapApplication / ApplicationConfig)

// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { provideAnimations } from '@angular/platform-browser/animations';
import { provideToastr } from 'ngx-toastr';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [
    provideAnimations(),
    provideToastr({
      timeOut: 4000,
      positionClass: 'toast-top-right',
      preventDuplicates: true,
      progressBar: true,
    }),
  ]
}).catch(err => console.error(err));

B) NgModule (AppModule)

// app.module.ts
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ToastrModule } from 'ngx-toastr';

@NgModule({
  imports: [
    BrowserAnimationsModule,
    ToastrModule.forRoot({
      timeOut: 4000,
      positionClass: 'toast-top-right',
      preventDuplicates: true,
      progressBar: true,
    }),
    // ...
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Criterio técnico: .forRoot() debe ejecutarse solo una vez (módulo raíz). En Standalone, usa provideToastr().

4) Usar ToastrService (mejor práctica)

Evita llamar a Toastr desde cualquier lugar. Crea un NotificationService que centralice mensajes, traducción y políticas UX:

// notification.service.ts
import { Injectable, inject } from '@angular/core';
import { ToastrService } from 'ngx-toastr';

@Injectable({ providedIn: 'root' })
export class NotificationService {
  private toastr = inject(ToastrService);

  success(msg: string, title?: string) {
    this.toastr.success(msg, title);
  }

  error(msg: string, title?: string) {
    this.toastr.error(msg, title);
  }

  // ...otros wrappers (info, warning)
}

En componentes, inyecta NotificationService en lugar de ToastrService: mejora testabilidad y evita dispersión de reglas.

5) Casos avanzados y configuración recomendada

Ajustes clave para producción:

Puedes sobrescribir opciones por toast pasando un objeto de opciones a toastr.success(msg, title, opts).

6) Errores comunes y soluciones rápidas

7) Testing y accesibilidad

Recursos y lecturas

FAQ