0

I'm new in Angular 5, and I'm implementing notifications, they work correctly if I import service to typescript component like:

import { ToastrService } from 'ngx-toastr';

 constructor(
    private toastr: ToastrService
  ) { }

   //call method
 this.toastr.success('Alert works')

This method works correctly, my question is, how can I use this into normal javascript file where I have Ajax call like:

jQuery(document).ready(function() {
  DataTablePerfiles.init();
  $(".myToggler").on("switchChange.bootstrapSwitch", togglerFunction);
});

function togglerFunction(event, state) {
  var data = {
    UsuarioId: $(this)
      .attr("data-id")
      .toString(),
    Activo: event.target.checked
  };

$.ajax({
    method: "PUT",
    headers: {
      "Content-Type": "application/json",
      Authorization: "Bearer " + token
    },
    url: "http://myapi/api/users/activate",
    data: JSON.stringify(data),
    success: function(data) {
       //this.toastr.success("changed correctly");
    },
    error: function(e) {
       //this.toastr.warning(e._body);
    }
  });

Problem is I can't import toastr service as same as typescript into js file, how can I import it or how can I do in typescript to listen ajax function then display alerts? Regards

georgeawg
  • 48,608
  • 13
  • 72
  • 95
Pedro
  • 1
  • 2
  • 1
    You should look into using Angular's HttpClient instead of using jquery. You also should retag this question as Angular, as Angular and AngularJS are two different frameworks. – Dillon May 16 '18 at 19:23
  • 1
    Mixing jQuery and Angular like this is asking for problems. – georgeawg May 16 '18 at 20:22
  • You can't do it, toaster is for Angular. You can potentially use a portal to dynamically create an angular toaster component that is rendered into a different angular tree and you provide a host node. See https://material-ui-next.com/utils/portal/ – Ruan Mendes May 16 '18 at 20:26

0 Answers0