Use The Native Device Clipboard In A NativeScript Angular Application

Back when I had just started to learn NativeScript I had created a tutorial for using the native device clipboard for copying and pasting. The previous tutorial demonstrated this functionality in a vanilla JavaScript application. In an effort to clean up any loose ends, I figured it would be a good idea to convert this tutorial into an Angular equivalent. While nothing has really changed in the clipboard functionality, Angular is a very different animal.

We’re going to see how to copy and paste directly within an application built with Angular, TypeScript, and NativeScript.

This is going to be a very simple application, but to keep it easy to understand, we’re going to start from scratch. From the Command Prompt (Windows) or Terminal (Mac and Linux), execute the following:

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

You’ll notice the --ng flag is present because we’re building an Angular with TypeScript project. While I’ve added the iOS platform, you won’t be able to do this unless you’re using a Mac with Xcode installed.

This project, like the vanilla version, will be using the nativescript-clipboard plugin by Eddy Verbruggen. To install it, execute the following:

tns plugin add nativescript-clipboard

Now we can proceed towards developing the application.

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

import { Component } from "@angular/core";
import * as Clipboard from "nativescript-clipboard";

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

    public stored: string;

    public constructor() {
        this.stored = "";
    }

    public copy(value: string) {
        Clipboard.setText(value).then(() => {
            console.log("Copied `" + value + "` to the clipboard!");
        });
    }

    public paste() {
        Clipboard.getText().then((content) => {
            this.stored = content;
        });
    }

}

To break down what is happening in the above, we have two methods and a constructor method. Anything we copy to the clipboard will be stored in a public variable called stored.

Everything else was taken, per the official documentation for the plugin.

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

<ActionBar title="{N} Clipboard Example"></ActionBar>
<StackLayout class="p-20 form">
    <StackLayout class="input-field">
        <TextField #input class="input input-border"></TextField>
    </StackLayout>
    <Button text="COPY" (tap)="copy(input.text)" class="btn btn-primary btn-active"></Button>
    <Button text="PASTE" (tap)="paste()" class="btn btn-primary btn-active"></Button>
    <Label text="Clipboard Text: {{ stored }}"></Label>
</StackLayout>

The above very basic UI has an input field that uses Angular templates, a button to copy the text, and a button to paste the text into a label. It is simple, but it proves our point.

Conclusion

While this tutorial was simple, it was a perfect example of using clipboard functionality within a NativeScript Android and iOS application built with Angular. Previously we saw how to do this in a vanilla JavaScript application, but the concepts were the same. The clipboard could be useful if you need to copy passwords, or any other data stored within your application.

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.