Hosted Toast

by Ken Williamson

A NativeScript Toast Plugin for Hosted Applications.

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


16 downloads in the last month

6 downloads in the last week

0 downloads in the last day