CODEWITHSUNDEEP
angulartypescript
saeef ahmed
saeef ahmed

Reputation: 761

Toast notification not working in angular

I want to show error message in toast... Here is my error-handler

import { ErrorHandler, Inject, NgZone } from "@angular/core";
import { ToastyService } from "ng2-toasty";

export class AppErrorHandler implements ErrorHandler {
constructor(@Inject(NgZone) private ngZone: NgZone, @Inject(ToastyService) 
private toastyService: ToastyService){}
handleError(error: any): void {
    this.ngZone.run(() => {
        this.toastyService.error({
            title: 'Error',
            msg: 'An unexpected error happened',
            theme: 'bootstrap',
            showClose: true,
            timeout: 5000
        });
    });
  }
}

Here is my submit method: 

submit() {
    this.vehicleService.create(this.vehicle).subscribe(x => console.log(x));
}

In my api i write an execption method so that it generate error and popup notification

Here is my api: 

[HttpPost]
    public async Task<IActionResult> CreateVehicle([FromBody] SaveVehicleResource vehicleResource)
    {
        throw new Exception();
        if (!ModelState.IsValid)
            return BadRequest(ModelState);

        var vehicle = mapper.Map<SaveVehicleResource, Vehicle>(vehicleResource);
        vehicle.LastUpdate = DateTime.Now;

        repository.Add(vehicle);
        await unitOfWork.CompleteAsync();

        vehicle = await repository.GetVehicle(vehicle.Id);

        var result = mapper.Map<Vehicle, VehicleResource>(vehicle);

        return Ok(result);
    }

In console it show's error message but no toast notification pop up...

Upvotes: 2

Views: 3872

Answers (2)

Undiscouraged
Undiscouraged

Reputation: 1125

When I was working through the same course from Mosh Hamedani on Udemy

I could solve this isse with the following steps:

  1. download the CSS file from https://github.com/akserg/ng2-toasty either bootstrap, default, or material
  2. place it under vega/ClientApp/src/toasty-style-bootstrap.css in case you went for Bootstrap theming
  3. make sure your vega/ClientApp/angular.json contains the new style file in the respective section
"styles": [
      "node_modules/bootstrap/dist/css/bootstrap.min.css",
      "src/styles.css",
      "src/toasty-style-bootstrap.css"
],

Upvotes: 1

coşkun &#231;ınar
coşkun &#231;ınar

Reputation: 26

You'll change and try like that :

from

import { ToastyService } from "ng2-toasty";

to

import { ToasterService, ToasterConfig, Toast, BodyOutputType } from 'angular2-toaster';

import { ToasterService, ToasterConfig, Toast, BodyOutputType } from 'angular2-toaster';

import 'style-loader!angular2-toaster/toaster.css';

export class NotificationsComponent {
  constructor(private toasterService: ToasterService) {}

 --your code 

 config: ToasterConfig;

  position = 'toast-top-right';
  animationType = 'fade';
  title = 'HI there!';
  content = `I'm cool toaster!`;
  timeout = 5000;
  toastsLimit = 5;
  type = 'default';

  isNewestOnTop = true;
  isHideOnClick = true;
  isDuplicatesPrevented = false;
  isCloseButton = true;

  types: string[] = ['default', 'info', 'success', 'warning', 'error'];
  animations: string[] = ['fade', 'flyLeft', 'flyRight', 'slideDown', 'slideUp'];
  positions: string[] = ['toast-top-full-width', 'toast-bottom-full-width', 'toast-top-left', 'toast-top-center',
    'toast-top-right', 'toast-bottom-right', 'toast-bottom-center', 'toast-bottom-left', 'toast-center'];




quotes = [
    { title: null, body: 'We rock at <i>Angular</i>' },
    { title: null, body: 'Titles are not always needed' },
    { title: null, body: 'Toastr rock!' },
    { title: 'What about nice html?', body: '<b>Sure you <em>can!</em></b>' },
  ];

makeToast() {
    this.showToast(this.type, this.title, this.content);
  }
clearToasts() {
    this.toasterService.clear();
  }
private showToast(type: string, title: string, body: string) {
  this.config = new ToasterConfig({
      positionClass: this.position,
      timeout: this.timeout,
      newestOnTop: this.isNewestOnTop,
      tapToDismiss: this.isHideOnClick,
      preventDuplicates: this.isDuplicatesPrevented,
      animation: this.animationType,
      limit: this.toastsLimit,
    });


  const toast: Toast = {
      type: type,
      title: title,
      body: body,
      timeout: this.timeout,
      showCloseButton: this.isCloseButton,
      bodyOutputType: BodyOutputType.TrustedHtml,
    };
    this.toasterService.popAsync(toast);
  }

}

Upvotes: 0

Related Questions