ngx-toastr-message

A lightweight, customizable Angular library for displaying toast notifications.

Dependencies

Latest version available for each version of Angular

Install

npm i ngx-toastr-message

Setup

app.component.ts

import {
  NgxToastrMessageComponent,
  NgxToastrMessageService,
} from 'ngx-toastr-message';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [NgxToastrMessageComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
})

Use

app.component.html

<lib-ngx-toastr-message></lib-ngx-toastr-message>

app.component.ts

private toastrService = inject(NgxToastrMessageService);
showMessage() {
    this.toastrService.show('This is a success message!', 'success');
}

Options

this.toastrService.show('This is a success message!', 'success');
this.toastrService.show('This is a error message!', 'error');
this.toastrService.show('This is a info message!', 'info');
this.toastrService.show('This is a warning message!', 'warning');

Change the font size; it should be in pixels.

this.toastrService.show('This is a success message!', 'success', {
  fontSize: 14
});

License

MIT