How to use Toastr notifications in an AngularDart web application

In this video we will look at the Toastr notifications jQuery plugin and demonstrate how to use this JavaScript solution in a Dart web application. As part of transitioning into the AngularDart video series, we will bootstrap a sample AngularDart application using the Stagehand scaffolding tool and start from there.

Here’s what we will cover in this lesson:

1. Setup a project fast with the Dart extension for VS Code
2. Adding the js package as a dependency
3. Understanding the structure of an AngularDart project
4. Importing Toastr.js and implementing our interop logic
5. Integrating our interop solution in the AngularDart app

The Solution

Here’s the interop file we’ve implemented:

// lib/src/interop/toastr.dart
@JS()
library toastr_interop;

import 'package:js/js.dart';
import 'package:js/js_util.dart';

@JS()
external ToastrInterface get toastr;

class ToastrInterface {
  external ToastrNotificationFn get info;
  external ToastrNotificationFn get success;
  external ToastrNotificationFn get error;
  external ToastrNotificationFn get warning;
  external Function get remove;
  external Function get clear;
}

typedef ToastrNotificationFn = Function(String message,
    [String title, dynamic options]);

// Converts a Dart Map object to a native JavaScript object
Object mapToJsObject(Map<String, dynamic> dartMap) {
  var jsObject = newObject();

  dartMap.forEach((name, value) {
    setProperty(jsObject, name, value);
  });

  return jsObject;
}

I hope this was insightful and you learnt something new and interesting today. If you have any questions or general feedback, let me know in the comments down below. Thanks!

Further reading

1. js package
2. How to Use JavaScript libraries in your Dart applications
3. Toastr.js notifications library

Sharing is caring

If you enjoyed reading this post, please share this through the various social buttons hovering on the left/top side of the screen . Also, check out and subscribe to my YouTube channel (hit the bell icon too) for videos on Dart.

Subscribe to the newsletter for my free 35-page Get started with Dart eBook and to be notified when new content is released.

Like, share and follow me for more content on Dart.