Bare-Bones NativeScript Application Part Two the Re-Usable Component.

In my previous post, I wrote up a quick tutorial on how to create the barest bones NativeScript Hello World app using Angular 2 and TypeScript. So if you haven’t checked it out or don’t know how to get that far stop reading now and head over to that article here.

Assuming you’re starting off with the bare bones Hello World app as a boilerplate, The first step is to go into the app directory a create a new file called person.component.ts and a new folder called images.

Next download a placeholder image form here or put any image you wish to use as a placeholder in the images folder and name it person.jpg.

Inside your person.component.ts file copy and paste the example below into it.

The person.component.ts is creating a Angular 2 component in NativeScript that displays the person’s name and image using NativeScripts stacked layout. Using the @Input decorator on the public property person allows us to set its value in a parent component like this:

<person-component [person]="MyPersonObject" ></person-component>

Another thing to note is we are binding the value of text field with [text] instead of how we would normally in NativeScript with text=”{{VALUE}}” . [text] this is Angular 2’s way of binding to an attribute the element. Lastly you can see (tap) inside of the Image element. (tap) is an Angular 2 event binding so that every time the image is tapped it fire the PersonOnTapped function and log to the console. You can read up more about Angular 2’s templating syntax here

Before you can reuse any Angular 2 component it has to be first imported and then added as a directive in the parents @Component decorators directives attribute.

To import the person.component.ts in the main-page.ts components, you need to add:

import {PersonController} from ‘./person.component’;

Then add the component to the @Component decorator array with:

directives: [PersonController],

And lastly to display the component below the Hello World label add:

<person-component [person]=”{name:’Josh Sommer’,image:null}” ></person-component>

[person] is binding its value to the public property of person in the PersonController. “{name:’Josh Sommer’,image:null}” is a quick and dirty way of passing the object to the component, and not something you would normally do but it easily shows how to pass the object to the child component.

After adding all the above code your main-page.ts should look something like:

Now run it on your device or emulator using tns run <platformName> and you should see this:

And that’s your first re-useable directive with Angular 2 and NativeScript. We can now re-used our person component throughout our app by importing it and adding it to any directive just like we did in main-page.ts. Then, for example, if we had a list of person objects in an array called contacts we could use ngFor to list out each person in a new instance of the person.component.ts with something like this:

<person-component [person]=”contactPerson” *ngFor=”#contactPerson of contacts”></person-component>

This is just the tip of the iceberg of the power and re-usability of NativeScript and Angular 2, and I’m looking forward to seeing what all we will be able to do with future release’s as both platforms continue to grow.