Display Toast Notifications In A NativeScript Angular Application

Back when I had just started working with NativeScript, about a year ago, I wrote a tutorial for displaying Toast notifications in Android. While still valid, it demonstrated these notifications using vanilla NativeScript and JavaScript. Not only that, but the notifications were only for Android. Since the framework has become significantly better, I figured it would be a good idea to demonstrate these Toast notifications in a NativeScript Angular application.

We’re going to see how to use a plugin to display Toast notifications in a NativeScript Android and iOS application built with Angular.

The goal of this example is simple and can be better explained through the following animated image:

We’re going to create a simple application with a button, that when pressed, will show a Toast message on both iOS and Android. These messages are useful for showing information without interrupting application functionality.

Creating a New Toast Project with NativeScript

For simplicity we’re going to start by creating a new project. From the Terminal (Mac and Linux) or Command Prompt (Windows), execute the following:

tns create ToastProject --ng
cd ToastProject
tns platform add ios
tns platform add android

The --ng tag in the above indicates we are building an Angular with TypeScript project, not a vanilla NativeScript project. It is important to note that if you’re not using a Mac with Xcode installed, you cannot build for the iOS platform.

In the previous tutorial we had interfaced with native Android APIs to make the Toast notification possible. This time around we are going to use a plugin to simplify the process and give us iOS support.

From the CLI, execute the following command:

tns plugin add nativescript-toast

At this point in time we can start developing our Angular application and display some Toast messages.

Adding the Application Logic and XML Markup

This particular application will be a single page application. We’ll start by adding the small bit of TypeScript logic and then build a simple UI.

Open the project’s app/app.component.ts file and include the following TypeScript code:

import { Component } from "@angular/core";
import * as Toast from "nativescript-toast";

@Component({
    selector: "my-app",
    templateUrl: "app.component.html",
})
export class AppComponent {

    public showToast(message: string) {
        Toast.makeText(message).show();
    }

}

In the above code we’ve imported the Toast plugin that we previously installed. Within a function we can make and show the Toast notification and since the function is public, it can be accessed from the UI.

Open the project’s app/app.component.html file and include the following XML markup:

<ActionBar title="{N} Toast Example"></ActionBar>
<StackLayout horizontalAlignment="center" verticalAlignment="center">
    <Button text="Display" (tap)="showToast('Example by Nic Raboy')" class="btn btn-primary"></Button>
</StackLayout>

The above UI has an action bar with our application title and a center aligned layout. The button will reside in the center of the screen and call the showToast method when pressed.

Conclusion

You just saw how to display Toast notifications in an Android and iOS application using NativeScript with Angular. Previously I had written about Toast notifications in a vanilla NativeScript application, and while still relevant, is not using the Angular framework. These notifications are great for showing information without forcing the user to respond.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.