Adding a new example to the repository's {N} application

This page describes how the NativeScript + Angular application of this repository is designed to support new examples.

Structure

In the sdkAngular folder of this repository you will find the runnable NativeScript + Angular application. This application is being updates constantly with the latest versions of all of its dependencies (Angular 2, nativescript-angular and nativescript-telerik-ui-pro).

Repository branches

There are two branches of the repository:

• release - the recommended and default branch which includes tested examples supported by the latest official releases of Angular 2, nativescript-angular and nativescript-telerik-ui-pro
• master - this is the branch where you can find all of the daily commits from the community and the nativescript-telerik-ui team. This is an unstable branch which is being use while the development of the next official release is being developed. Use with caution.

Application navigation and loading of examples pattern

The sdkAngular application is designed to support infinite examples showing with a simple "list to list" navigation. The application presents a list of all of the components followed by a list of the available components examples/folder of examples and finally shows actual example (angular 2 @Component).

Adding new example

In order to add an new example in a specific component (SideDrawer, ListView etc.) you have to do the following:

• Think of a name for the example, make sure its not too long but also that it makes it clear what that example is for, for example the pull-to-refresh shows how to enable the "pull to refresh" functionality of the RadListView component.
• Create a folder in the correct components folder with the name you picked for your "new example" (example)
• In that folder create the required files for an new Angular 2 @Component, the exmple-name.component.ts, exmple-name.component.html and example-name.component.css (if needed)
• Make sure you followAngular 2 style guide when implementing new examples, for easier development you can turn on the codelyzer extension of Visual Studio Code editor.
• After you have created the @Component you need to tell the "sdkAngular" application where the new Component is. Open the app > navigation > appExamples.ts file and import the new Angular Component (example), after that add it to the AppExampleComponents array (example)
• Finally you need to add that "example" the application's "lists". This is handled by a json file which lists the ExampleItem of the application. The "examples mock" json can be fond at app > navigation > mock-exampleItems.ts (example)

When adding a folder to the structure of the application you need to set the subItems of the json (example)