17 Angular databinding and services
This chapter covers
- Implementing databinding in Angular
- Services in Angular
- Navigating using modal dialogs
In the previous chapter, you continued building the NativeScript-with-Angular version of the Pet Scrapbook by adding the Home and List components. You also learned how Angular routing works and used the <page-router-outlet></page-router-outlet> to dynamically load the List component.
There’s a lot to cover in this chapter, but we’re going to approach it just like we did with the original Pet Scrapbook app. We’ll start by introducing you to how Angular databinding works, teaching you one-way binding, event binding, and then two-way binding. Then, you’ll learn how services are created and used in an Angular app. Finally, we’ll finish the chapter by teaching you how to open components as modal dialogs
Let’s get started!
17.1 Databinding with Angular
In chapter 8, we described databinding as the process of linking together JavaScript objects and UI elements. In a vanilla NativeScript app, the JavaScript object we were binding to was an observable, loaded from the data/observable NativeScript core module. In the UI layer, UI element attributes were linked with NativeScript’s mustache syntax. For example, to bind the name property of an observable to the text attribute of a label element you would use: <Label text="{{ name }}" />.