How to use Toastr.js 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

→ Watch on YouTube

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;
}

→ Get the source code
→ Watch on YouTube

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 a Dart web application
3. Toastr.js notifications library

---

Sharing is caring 🤗

If you enjoyed reading this post, please share this through the various social channels. Also, check out and subscribe to my YouTube channel (hit the bell icon too) for videos on Dart.

Subscribe to my email newsletter to download 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.