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