Skip to main content

Uso básico de ngx-toastr en Angular

La librería ngx-toastr permite mostrar notificaciones tipo toast en aplicaciones Angular de forma sencilla y personalizable.

Inyección y uso de ToastrService​

import { Component } from "@angular/core";
import { ToastrService } from "ngx-toastr";

@Component({
  selector: "app-demo",
  templateUrl: "./demo.component.html",
})
export class DemoComponent {
  constructor(private toastr: ToastrService) {}

  showSuccess() {
    this.toastr.success("Operación completada con éxito.", "Éxito");
  }

  showInfo() {
    this.toastr.info("Esta es una información importante.", "Información");
  }

  showWarning() {
    this.toastr.warning(
      "Esta acción puede tener consecuencias.",
      "Advertencia"
    );
  }

  showError() {
    this.toastr.error("Ha ocurrido un error inesperado.", "Error");
  }
}

Personalización adicional​

  • Puedes pasar una tercera opción como objeto:
this.toastr.success("Texto", "Título", {
  timeOut: 5000,
  progressBar: true,
});

Referencias​