A NativeScript Toast Plugin for Hosted Applications.
npm i --save nativescript-hosted-toast

Nativescript Hosted Toast Plugin

This a Nativescript Plugin that lets you make toast from a hosted Angular 2 application.


tns plugin add nativescript-hosted-toast


Create a wrapper application with the following code and a Navivescript WebView. See the following project as an example:

var application = require("application");
var context =;
function pageLoaded(args) {
var page = args.object;
var web = page.getViewById("webView");
var androidSettings =;
var hostedToast = new com.ulbora.hosted.toast.HostedToast(context);, 'HostedToast');
web.url = "http://someURLWhereAngular2AppIsHosted";
exports.pageLoaded = pageLoaded;

Inside the Angular 2 hosted application, write the code where you want to access device information. See the following project as an example:

Component code:

deviceReady: boolean;

ngOnInit() {
try {
if (HostedToast) {
this.deviceReady = true;
} catch (err) {

showToast() {
try {
HostedToast.showToast("Toast is working in a hosted world.");
} catch (err) {

Template Code:

<div *ngIf="deviceReady">
<div> <b>Your Toast</b>: <span (click)="showToast()" class="glyphicon glyphicon-phone"></span></div>

Available Methods

HostedToast.showToast("some message")

Sends a toast message to the device