7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.4 The Add Page

In this lesson, we'll create a page for adding to-do items. Simple, but we'll also see how to save that data to the Firebase back-end.

4.4 The Add Page

Hello everyone, I am Reggie Dawson. Welcome to the NativeScript and Mobile Angular 2 course from Tutsplus. In this video, we will create our page to add notes to our app. By now you should be familiar with the conventions of Angular 2, and how it works. As a result you know what to expect as we continue to add to our project. First we will add a folder called add in our pages folder. Again we will create three files, add.component.ts, add.html, and add.css. Once we do that, go to add.html. The first thing we add is our stack layout, after that we add an action bar. Now we have disabled the action bar on the first page, but we use it here to let the user know where they are in the app, and what they are supposed to be doing. Now after that, we will add a nested grid layout. Here we have set up a grid with two rows and one column. One row is set to 60 pixels while the second one is set to 200 pixels. The column is set to take up whatever space is available. The text field is set to contain the title of the note we were adding. The text view is going to hold the contents of your note. After that we will add our buttons. These buttons will add a note or cancel for us. After that we can go to our add.component.ts. Of course, the first thing we will do in this file is add our import statements. Again, we just import the component and router from Angular, and after that we require the Firebase plugin. Then we add our component decorator. Again the usual information is here, our selector, template URL, and style URLs. Then we add our class, and then we add two properties, one for title and one for note. Of course these properties are bound to the text field and text view in our template through ngModel. Then we add our constructor. Again adding a constructor is optional, but if we want access to the router we have to use our constructor to make it available to us. We know we normally use the router navigate after we do something, and in this case we will navigate back to the list page when we add a note. Next we have our add note method. First we check to make sure that there is both a title and a note. If not, the user will be alerted to add the proper information. Then in the else statement we are using Firebase push to add to our Firebase data. Now there is another method that we can use to add data, but this is the superior way to do this. This is because the push method will automatically generate a random ID that is tied to the record. In this way, our database can contain duplicate data since each record is indexed by the ID. Now in this Firebase push method, we are accessing the notes path in our data. If it doesn't exist it will be created the first time we save data with this method. Then we are parsing in our title and note properties from our class. Finally we are adding our success function and again using the arrow function. Of course you know we are doing this to preserve our scope and make sure our router navigate works properly. The last thing we need to add is the cancel method that will navigate back to the list page. After that, our add page is finished. Of course the last thing we need to do is import the add page to our app.component.ts file. And then after that we will add a route to our add component. After that our add page is complete. In the next video, we will create our list page and finally preview our add.

Back to the top