Our First View via Component Building

We've been working hard at framing the base of our app in Chapter 2, Feature Modules, and now it's time to finally get a glimpse of what we're working with. This is all about getting that first view from our sketch to the mobile device screen.

Building views with NativeScript for Angular is not much different than view building for the web. We will use Angular's Component decorator to build various components our UI needs to achieve the desired usability we're after. Instead of using the HTML markup, we will be using NativeScript XML, which is an extremely powerful, yet simple and concise, abstraction of all native view components on both iOS and Android.

We won't be covering all the benefits and types of components you have access to here; but to learn more, we recommend any of the following books: 

• https://www.packtpub.com/web-development/getting-started-nativescript
• https://www.manning.com/books/nativescript-in-action

In this chapter, we will be covering the following topics:

• Using Component decorator to compose our views
• Creating reusable components
• Creating a custom view filter using Pipe
• Running the app on the iOS and Android simulators