4.5 The List View
To wrap things up, we'll complete our to-do application by creating a view to display the to-do list.
1.Introduction1 lesson, 00:50
2.First Look at Nativescript4 lessons, 19:03
3.Nativescript Basics3 lessons, 20:34
4.Build a Nativescript and Angular 2 App5 lessons, 27:32
5.Conclusion1 lesson, 00:58
4.5 The List View
Hello everyone, I am Reggie Dawson. Welcome to the NativeScript in Mobile Angular 2 course from Tuts+. In this video, we will configure the list page of our app. So far we have set up ways to log in and sign up to our app. We have also created a way to add notes. The last thing we need is a way to view the notes that we add. First, we will add a folder in our pages folder called list to hold our component. Inside we will add the list.component.ts, the list.html, and the list.css files. After that, go to the list.html file. The first thing we will add is our StackLayout. Then after that, we will add an action bar. Then after that, we will add a button. The button says, ADD NOTE and executes the add method. This is how we get access to our page where we can add a note. After that, we will introduce a component that we haven't used yet. The ListView. In Angular, one of the big things has always been how it handles data. In Angular 2, they have the NgFor directive that allows us to display a list of data if you supply it within array. NativeScript implements its own version of this called the ListView. It is essentially doing the same thing as an NgFor without the syntactic sugar. The NgFor is preceded by an asterisk which is shorthand for swapping out HTML templates. The ListView doesn't have that and we have to add the template tags ourselves. You will see what I mean in the moment. First, we will add the ListView that will wrap everything else. Here, we have the ListView with the attribute binding applied. This attribute binding is one way unlike when we use the NG model. This binding serves to bind this ListView to the notes property from our component. This property should be an array, although we can use an observable or an observable array as well. These are offered by the RxJS library that is included in our project by default as Angular makes use of it. Here's where this differs from Angular 2. You see this template? Well this will be duplicated for each item in our array. With Angular 2, we don't have to wrap our code in a template. Angular just supplies the tags and swaps them out on its own. NativeScript will loop over the supplied array and add a template for each item and the let item attribute will provide local access to each item. This is how we can display data. Then finally, we add a GridLayout to hold our data. I nested these layouts because I was getting an error when I tried to bind on more than one element in the StackLayout. As long as you nest your layout inside of another, you should be able to bind multiple element. We should be familiar with the grid by now, where we are setting up two rows in one column. Then in the label, we are one way binding to the item title property. Again, this just sets the text of the element. We can't use this as a set related properties from the array. Also remember that one of the fields returned from our data's a title. Also note how we use the item to access our data. We are doing something similar with the TextView except we are using the note field from our data. We know this contains the contents of our notes that we add. After that, list.html is finished. Then we can go over to list.component.ts. First, we add our imports in our component decorator. They are so similar to what we have done in all of our components, that you should understand what we are doing here. We also import OnInit with component. We know we use this to do something when our component is created. We will get to that in a minute. Then we import router and Firebase like we have been doing in other components. After that, we have our component decorator with our selector, templateUrl, and styleUrls. Then we had our class that implements the OnInit method. Of course we have to do this to use OnInit in our class. Then we add an array that is typed to hold objects. And then we had our constructor so that we can use the router. Then we add the ngOnInit method that will execute the getNotes method. When this page is created, this method will grab our notes for us. Then we had the getNotes method. After that, we had the onChildEvent function inside of the getNotes method. Again, we use the arrow function that receives the result of an event listener. The result is the data from Firebase. We then take this data and push it to our array. The way this data is returned is one record at a time the first time the data is grabbed and then for each record that is added. The last thing we will add is the child event listener that will execute the onChildEvent function when it detects data. The onChildEvent can be one of a few different child events but we are most concerned with child added. The last thing we need to add to this file is the add method that will allow us to add a note. All this method does is just navigate to the add route. We just need to add the component to our app.component.ts. First, we import the list component. And then after that, we add a route for this component. After that, our project is finished and we can preview it. Bear in mind, this can be a little buggy with the Genymotion emulator possibly related to the plugin. If you have any problems, try using an actual device. Let's go ahead and save and preview the app. I could have used the Run command or Live Sync command but I wanted to make sure this app could build properly first. Then if we run the Live Sync command, it should launch on our device. Now once the app starts, go ahead and click on Sign Up. Try entering a bad email address or nonmatching passwords. Now after that, go ahead and sign up. And as you can see, our new user has been created. And we have navigated back to the sign in page. Now let's mess up the log in here. And now, let's actually log in. Then it should navigate to the screen where you can add notes. You have now learned everything you need to know to build apps with NativeScript. You now have a working app. It may not be perfect, but it's a great start and a better way to understand how NativeScript works.