Как добавить тостер в Angular?

Question

Любая идея, как добавить уведомление о тостере при возникновении ошибки вместо использования оповещения.Многие учебники просто делают учебник при нажатии на кнопку, но я хочу немного автоматизации.Ниже мой код

saveStudentDetails(values) {
  const studentData = {};

  studentData['id'] =  values.id;
  studentData['password'] =  values.password;
  this.crudService.loginstudent(studentData).subscribe(result => {
    this.student = result;
    this.router.navigate(['/address']);
  },
    err => {
      console.log('status code ->' + err.status);
      alert('Please try again');
 });

}

Любая идея, как я могу сделать уведомление об ошибке тостера на основе этого кода?Спасибо

Answer 1

Для отображения тостера используйте ngx-toastr библиотека

Шаги:

1) npm install ngx-toastr --save

2) Следуйте другим настройкам с здесь

Быстрый код:

import { ToastrService } from 'ngx-toastr';

constructor(private toastr: ToastrService) {}

saveStudentDetails(values) {
  const studentData = {};

  studentData['id'] =  values.id;
  studentData['password'] =  values.password;
  this.crudService.loginstudent(studentData).subscribe(result => {
    this.student = result;
    this.router.navigate(['/address']);
  },
    err => {
      console.log('status code ->' + err.status);
      this.toastr.error('Hello world!', 'Toastr fun!');
 });

Answer 2

Вы можете использовать тостер. Более подробную информацию можно найти на https://www.npmjs.com/package/toastr. Демонстрация на https://codeseven.github.io/toastr/demo.html

Answer 3

Вы можете использовать любые сторонние пакеты тостеров, такие как ngx-toastr , чтобы отобразить уведомление об ошибке тостера.

Например, с помощью ngx-toastr:

constructor(
  ...
  private toastr: ToastrService
) {}

this.crudService.loginstudent(studentData).subscribe(
  result => {
    this.student = result;
    this.router.navigate(['/address']);

    this. toastr.success('Logged in');
  },
  err => {
    console.log('status code ->' + err.status);

    this. toastr.error('Please try again');
  }
);