So you just installed NativeScript and finished the tutorial. Do yourself a favor and start here!
If you don’t know what NativeScript is yet, then don’t worry.  Join us as we explore NativeScript!  We’ve assembled the basics in this easy-to-read primer and interactive tutorial.

What is NativeScript (in a nutshell)?

With NativeScript you can build cross-platform applications with one single code base.  This means that you’ll be able to build both Android and iOS apps simultaneously while customizing code specific to each platform.

Now that you have a basic definition, you’re probably asking, “What can I build with NativeScript and how can I get it done FAST?”

One more thing before we start…

For this tutorial, we’ll be building a simple Notes app that implements some of the tools from NativeScript UI by Telerik.  After this tutorial, you will know how to use these components–and others–by yourself.

Image result for professor farnsworth good news

Let’s get started!

Creating a NativeScript Angular project

To create a new Angular project, let’s run the following command from NativeScript CLI:
At this point, you should have a brand new app compatible with Android and iOS.  To test your new app, just run the following commands:
tns create nativescript-notes --ng
cd nativescript-notes
tns run android

Not that you have run the app… what’s next?

Open the app project in your favorite editor, then delete the items folder and remove all unnecessary imports and declarations in these files: app.module.ts and app.routing.ts.

Your code should look like this:

app.module.ts
import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { AppRoutingModule } from "./app.routing";
import { AppComponent } from "./app.component";

@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        NativeScriptModule,
        AppRoutingModule
    ],
    declarations: [
        AppComponent,

    ],
    providers: [
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
/*
Pass your application module to the bootstrapModule function located in main.ts to start your app
*/
export class AppModule { }
app.routing.ts
import { NgModule } from "@angular/core";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { Routes } from "@angular/router";

const routes: Routes = [
   // No route available yet.
];

@NgModule({
    imports: [NativeScriptRouterModule.forRoot(routes)],
    exports: [NativeScriptRouterModule]
})
export class AppRoutingModule { }
Now create a folder called notes and add the following files:

  • notes.component.html
  • notes.component.css
  • notes.component.ts
  • notes.module.ts
  • notes.routing.ts.

Now what?

For convenience, you can install following extension to NativeScript CLI.  This will create the files for you.  Unfortunately, you will need to add the module file and the routing file yourself, but more on that later.
tns extension install nativescript-angular-cli
Once installed, just run one of these commands:
To keep it short, both commands achieve the same thing, but it’s up to you to decide which one you would rather use.  If you want to know more about this extension and all of its capabilities, then check out this GitHub repository.
tns g c notes

or 

tns generate component notes
Please note that if you used this extension, then the components will be created with a Sass file.  In this tutorial, we will be using CSS, so you will need to make this change in the the TypeScript file.
@Component({
  moduleId: module.id,
  selector: 'app-notes',
  templateUrl: './notes.component.html',
  styleUrls: ['./notes.component.css']
})
Now add the file notes.routing.ts inside the notes folder and then add the following code:
import { NgModule, Component } from '@angular/core';
import { Routes } from '@angular/router';
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { NotesComponent } from '~/notes/notes.component';

const routes: Routes = [
    {
        path: '',
        component: NotesComponent
    }
];

@NgModule({
    imports: [NativeScriptRouterModule.forChild(routes)],
    exports: [NativeScriptRouterModule]
})
export class NotesRoutingModule { }
Now add the file notes.module.ts inside the notes folder and add the following code:
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { NativeScriptModule } from 'nativescript-angular/nativescript.module';
import { NativeScriptFormsModule } from 'nativescript-angular/forms';
import { NativeScriptCommonModule } from "nativescript-angular/common";
import { NotesComponent } from '~/notes/notes.component';
import { NotesRoutingModule } from '~/notes/notes.routing';


@NgModule({

    imports: [
        NativeScriptFormsModule,
        NotesRoutingModule,
        NativeScriptCommonModule
    ],
    declarations: [
        NotesComponent
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class NotesModule { }
Since we now have a component and two new files (notes.module.ts and notes.routing.ts), we can go back to our app.routing.ts file and add the following code:
import { NgModule } from "@angular/core";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { Routes } from "@angular/router";

const routes: Routes = [
    { path: "", redirectTo: "/notes", pathMatch: "full" },
    { path: "notes", loadChildren: "./notes/notes.module#NotesModule"}
];

@NgModule({
    imports: [NativeScriptRouterModule.forRoot(routes)],
    exports: [NativeScriptRouterModule]
})
export class AppRoutingModule { }

In order to used NativeScript UI Tools, we must install the component plugin first.  To install the plugin, run this command in the terminal or command prompt:

tns plugin add nativescript-ui-listview

After installing the plugin, you might need to delete the platforms, hooks, and node-modules folders from your project.

Now, we will import the NativescriptUIListView module into the notes.module.ts file:

import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { NativeScriptModule } from 'nativescript-angular/nativescript.module';
import { NativeScriptFormsModule } from 'nativescript-angular/forms';
import { NotesComponent } from '~/notes/notes.component';
import { NotesRoutingModule } from '~/notes/notes.routing';
import { NativeScriptUIListViewModule } from "nativescript-ui-listview/angular";
import { NativeScriptCommonModule } from "nativescript-angular/common";

@NgModule({
    imports: [
        NativeScriptFormsModule,
        NativeScriptUIListViewModule,
        NotesRoutingModule,
        NativeScriptCommonModule

    ],
    declarations: [
        NotesComponent
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class NotesModule { }
Now, let’s add some code to the notes file to determine if what we just did works:
notes.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'app-notes',
  templateUrl: './notes.component.html',
  styleUrls: ['./notes.component.css']
})
export class NotesComponent implements OnInit {

  private _dataItems: any = ["test0", "test1", "test2"]

  constructor() {
  }


  ngOnInit() {
  }

  get dataItems(): any {
    return this._dataItems;
  }
}
notes.component.html
<StackLayout>
 <GridLayout tkExampleTitle tkToggleNavButton>
   <RadListView [items]="dataItems">
       <ng-template tkListItemTemplate let-item="item">
           <StackLayout orientation="vertical">
               <Label [text]="item">
           </StackLayout>
       </ng-template>

<ListViewStaggeredLayout tkListViewLayout scrollDirection="Vertical" spanCount="2"></ListViewStaggeredLayout>

   </RadListView>
 </GridLayout>
</StackLayout>
If everything went right, then your app should look like this:

Next, create a folder called models and add the following files to it: notes.ts and notes-date-form.ts,

Since the list doesn’t look anything like a note, we’ll be using the CardView plugin to give the list the appearance of a note:

tns plugin add nativescript-cardview

But first, let’s register the CardView element in the notes.module.ts file:

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { AppRoutingModule } from "./app.routing";
import { AppComponent } from "./app.component";
import { registerElement, NSModuleFactoryLoader, ModalDialogService } from 'nativescript-angular';
registerElement("CardView", () => require("nativescript-cardview").CardView);


@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        NativeScriptModule,
        AppRoutingModule
    ],
    declarations: [

    ],
    providers: [
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
/*
Pass your application module to the bootstrapModule function located in main.ts to start your app
*/
export class AppModule { }
notes.ts
interface INotes {
    noteId: number;
    title: string;
    note: string;
    date: Date;
    hasDateChecked: boolean;
    isSelected: boolean;
}

export class Notes implements INotes {
    constructor(public noteId: number = 0,
        public title: string = "",
        public note: string = "",
        public date: Date = null,
        public hasDateChecked: boolean = false,
        public isSelected: boolean = false) {
    }
}
note-date-form.ts
interface IDateForm{
    day: Date;
    time: Date;
}

export class DateForm implements IDateForm{
    constructor(public day: Date = new Date(new Date(2018, 0, 1)),
        public time: Date = new Date(new Date().setHours(8, 0,))){
    }
}

Let’s test our app again, but this time, we’ll use the model we created:

notes.component.ts
import { Component, OnInit } from '@angular/core';
import { ObservableArray } from 'tns-core-modules/data/observable-array/observable-array';
import { Notes } from '~/notes/models/notes';

@Component({
 moduleId: module.id,
 selector: 'app-notes',
 templateUrl: './notes.component.html',
 styleUrls: ['./notes.component.css']
})
export class NotesComponent implements OnInit {

 private data: Notes[] = []
 private _dataItems: ObservableArray<Notes>;

 constructor() 
 }

 get dataItems(): ObservableArray<Notes> {
     return this._dataItems;
 }

 ngOnInit() {
     this.data.push(new Notes(1, "Test", "Hello", null), new Notes(2, "Test1", "Hello, this one has more text than the previous one", null));
     this._dataItems = new ObservableArray(this.data);
 }
}
notes.component.html
<GridLayout rows="*, auto" backgroundColor="#E8E8E8">
 <GridLayout tkExampleTitle tkToggleNavButton>
   <RadListView [items]="dataItems" margin="2dp 4dp 0dp 2dp">
     <ng-template tkListItemTemplate let-item="item">
       <CardView backgroundColor="white" margin="4dp">
         <GridLayout rows="auto,auto">
           <Label row="0" [text]="item.title" textWrap="true" margin="6dp 8dp" fontWeight="bold"></Label>
           <Label row="1" [text]="item.note" textWrap="true" margin="6dp 8dp"></Label>
         </GridLayout>
       </CardView>
     </ng-template>
     <ListViewStaggeredLayout tkListViewLayout scrollDirection="Vertical" spanCount="2"></ListViewStaggeredLayout>
   </RadListView>
 </GridLayout>
 <GridLayout row="2" height="50dp" backgroundColor="white">
   <Label text="Take a note..." textWrap="true" verticalAlignment="middle" marginLeft="16dp"></Label>
 </GridLayout>
</GridLayout>
If everything went right, then your app should now look like this:
Add a folder called services.

Inside add a new file called notes.service.ts and add the logic to get and to create a new list:

notes.service.ts
import { Injectable } from '@angular/core';
import { Notes } from '~/notes/models/notes';

@Injectable()
export class NotesService {

  private _notesList: Notes[];

  constructor() {
    this._notesList = [];
  }

  public addNewNote(newNote: Notes) {
    if (newNote.title.length > 0 || 0 < newNote.note.length) {
      newNote.noteId = this._notesList.length + 1;
      this._notesList.push(newNote);
    }
  }

  public getNoteList() {
    return this._notesList;
  }

}

Every service has to be declared as a provider in the notes.module.ts, so let’s do that:

notes.module.ts
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { NativeScriptModule } from 'nativescript-angular/nativescript.module';
import { NativeScriptFormsModule } from 'nativescript-angular/forms';
import { NotesComponent } from '~/notes/notes.component';
import { NotesRoutingModule } from '~/notes/notes.routing';
import { NativeScriptUIListViewModule } from "nativescript-ui-listview/angular";
import { NativeScriptCommonModule } from "nativescript-angular/common";
import { NotesService } from '~/notes/services/notes.service';

@NgModule({
    providers: [
        NotesService
    ],
    imports: [
        NativeScriptFormsModule,
        NativeScriptUIListViewModule,
        NotesRoutingModule,
        NativeScriptCommonModule

    ],
    declarations: [
        NotesComponent
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class NotesModule { }

Now we’re able to create a new note and to view a list of notes the user has added.

Creating notes

Since our goal is to create a Notes app, we want to have all the basic functionalities you would expect from a notes app, such as the ability to View, Create, Update, and Delete a note.  For this part of the tutorial, we will only implement the create functionality.

Using the commands you learned above, let’s create a new components called new-note inside the notes folder:

tns g c new-note
Next, let’s declare the new component in the notes.module.ts file:
notes.module.ts
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { NativeScriptModule } from 'nativescript-angular/nativescript.module';
import { NativeScriptFormsModule } from 'nativescript-angular/forms';
import { NotesComponent } from '~/notes/notes.component';
import { NotesRoutingModule } from '~/notes/notes.routing';
import { NativeScriptUIListViewModule } from "nativescript-ui-listview/angular";
import { NativeScriptCommonModule } from "nativescript-angular/common";
import { NotesService } from '~/notes/services/notes.service';
import { NewNoteComponent } from '~/notes/new-note/new-note.component';

@NgModule({
    providers: [
        NotesService
    ],
    imports: [
        NativeScriptFormsModule,
        NativeScriptUIListViewModule,
        NotesRoutingModule,
        NativeScriptCommonModule

    ],
    declarations: [
        NotesComponent,
        NewNoteComponent
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class NotesModule { }
We also need to declare the route in the notes.routing.ts file:
notes.routing.ts
import { NgModule, Component } from '@angular/core';
import { Routes } from '@angular/router';
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { NotesComponent } from '~/notes/notes.component';
import { NewNoteComponent } from '~/notes/new-note/new-note.component';

const routes: Routes = [
    {
        path: '',
        component: NotesComponent
    },
    {
        path: 'new-note',
        component: NewNoteComponent
    }
];

@NgModule({
    imports: [NativeScriptRouterModule.forChild(routes)],
    exports: [NativeScriptRouterModule]
})
export class NotesRoutingModule { }
Now that we’ve checked this tasks off of our list, we can start working on the New Notes component.

But first, let’s go here and download the icon in black as a png file for android.  Then, let’s extract the file into App_Resources > Android.

Please note that this is for Android and similar steps are required for iOS using iOS files.

new-note.component.ts
import { Component, OnInit, ViewChild } from '@angular/core';
import { Notes } from '~/notes/models/notes';
import { RouterExtensions } from 'nativescript-angular';
import { NotesService } from '~/notes/services/notes.service';
import { RadListViewComponent } from 'nativescript-ui-listview/angular';

@Component({
  moduleId: module.id,
  selector: 'app-new-note',
  templateUrl: './new-note.component.html',
  styleUrls: ['./new-note.component.css']
})
export class NewNoteComponent implements OnInit {

  private _note: Notes;

  constructor(private _routerExtensions: RouterExtensions,
    private _notesService: NotesService) {
    this._note = new Notes();
  }

  ngOnInit() { }

  public goBack() {
    this._routerExtensions.navigate(['/notes'], {
      transition: {
        name: "slideBottom",
        duration: 100
      }
    });

    this._notesService.addNewNote(this._note);
  }
}
new-note.component.html
<ActionBar title="" class="action-bar">
  <NavigationButton icon="res://baseline_arrow_back_black_24" (tap)="goBack()"></NavigationButton>
</ActionBar>
<GridLayout>
  <StackLayout id="text-view-container">
    <TextView class="text-view" id="title-text-view" hint="Title" text="" [(ngModel)]="_note.title" editable="true" backgroundColor="white"
      fontWeight="bold"></TextView>
    <TextView class="text-view" hint="Note" text="" [(ngModel)]="_note.note" editable="true" backgroundColor="white"></TextView>
  </StackLayout>
</GridLayout>

Getting the list

Now that we have implemented the service and the New note component, we can View a list of notes created:
notes.component.ts
import { Component, OnInit, ViewChild } from '@angular/core';
import { ObservableArray } from 'tns-core-modules/data/observable-array/observable-array';
import { Notes } from '~/notes/models/notes';
import { RouterExtensions } from 'nativescript-angular';
import { NotesService } from '~/notes/services/notes.service';

@Component({
  moduleId: module.id,
  selector: 'app-notes',
  templateUrl: './notes.component.html',
  styleUrls: ['./notes.component.css']
})
export class NotesComponent implements OnInit {

  private _notesList: Notes[] = [];

  constructor(private _routerExtensions: RouterExtensions,
    private _notesService: NotesService) {
    this._notesList = this._notesService.getNoteList();
  }

  ngOnInit() {
  }

  get dataItems() {
    return this._notesList;
  }

  public goToNewNoteView() {
    this._routerExtensions.navigate(['/notes/new-note'], {
      transition: {
        name: "slideTop",
        duration: 100
      }
    });
  }
}
notes.component.css
#page{
    background-color: #E8E8E8;
}

#notes-list-view{
    margin:2dp 4dp 0dp 2dp;
}

#note-card{
    margin: 4dp;
}

.note-labels{
    margin: 6dp 8dp;
}

#bottom-bar{
    height: 50dp;
    background-color: white;
}

#bottom-bar-label{
    vertical-align: middle;
    margin-left: 16dp;
}
notes.component.html
<ActionBar title="Notes" icon="" class="action-bar">
</ActionBar>
<GridLayout rows="auto, *, auto" id="page">
  <GridLayout tkExampleTitle tkToggleNavButton>
    <RadListView [items]="dataItems" id="notes-list-view">
      <ng-template tkListItemTemplate let-item="item">
        <CardView id="note-card">
          <GridLayout rows="auto,auto">
            <Label row="0" class="note-labels" [text]="item.title" textWrap="true"></Label>
            <Label row="1" class="note-labels" [text]="item.note" textWrap="true"></Label>
          </GridLayout>
        </CardView>
      </ng-template>
      <ListViewStaggeredLayout tkListViewLayout scrollDirection="Vertical" spanCount="2"></ListViewStaggeredLayout>
    </RadListView>
  </GridLayout>
  <GridLayout columns="*, auto" row="2" id="bottom-bar" (tap)="goToNewNoteView()">
    <Label text="Take a note..." textWrap="true" id="bottom-bar-label"></Label>
  </GridLayout>
</GridLayout>

Let’s recap…

In this tutorial, we learned how to create a Notes app that integrates the RadListView from Nativescript UI Components.  Our current app only creates a list of notes.  We will cover additional functionalities in the next tutorial, where we will learn how to set up and use the RadDataForm to select a date for the note, which will later be displayed on a calendar using the RadCalendar component. We will also tackle other basic functionalities of a Notes app, like creating, updating, deleting, and viewing.