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-pro-ui).

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 follow Angular 2 style guide when implementing new examples, for easier development you can turn on the codelyzer extension of Visual Studio Code editor.
• The sdkAngular application is using lazy loading which means that next you need to add the route for your new example to that UI component's ngModule declarations to which you are adding the example (like this).
• Next add a new Route to the Routes of that ngModule (## like this).
• Add a new "root" Route to the app.routes.ts and make sure to set the correct loadChildren for that UI components lazy routes (like this).
• Finally update the mock-exampleItems.ts with your example. This is where the navigation of the app reads which example to show and where. Note that for simplicity the lazy loading is done by placing the component's class name as route and repeating it twice (example: "path": "ListViewGettingStartedComponent/ListViewGettingStartedComponent") (in real app those routes should be something that has more meaning when reading) (like this).

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