Create a New Task Form Page Template with Ionic
We'll create the template for our new page and set everything up so that we can use this page to create new tasks. The first thing we will do is create a BehaviorSubject task variable that we'll store form values in to send to Firebase.
Because we are using the ionic framework we'll lean heavily into this when creating our templates. You'll see how we bind text values to the object we'll send to Firebase as well as a selector component that will use ion-segment.
We'll also see a tip on handling the async pipe in a top container in our template so that we don't have to manually add it everywhere we'll render a property from an observable
Jorge Vergara: [0:01] With our new task component, the first thing we are going to do is to create a task object.
[0:09] I prefer to handle most of my data as observable streams. This makes it easier for me to manage everything together, since most of AngularFire functions return observables. This behavior subject is going to be of type task, and we're going to get started with the few properties that we have.
[0:35] Now, if we navigate to our page, we see that we have a title and we have the body of the page. Let's start stitching everything together. First I'm going to replace this hardcoded title for the variable that we just created. Since task is unobservable, we are using Angular's async pipe to be able to access the title property. Then we are going to create our first input. It's going to be for the title.
[1:06] Here, we're going to have a label and the input field. Here, we are going to bind our task title using Angular's NG model. Since we are going to start using this task observable all over the template, there is one change I'd like to make. I'm going to wrap the entire template inside an NG container. Here, I will add the ng-if directive and I will render the template if there is a task object.
[1:49] Since we are using the async pipe here in the top container, we are subscribing to the observable here. That way we can simplify all of the other task calls. You see that here I don't have to use the async pipe. You see that if I come here and type the task title, it's going to immediately update on our header.
[2:15] Then we are going to repeat this process but instead of a regular text input, we are going to add a text area, and this is going to be for the task description. Then we are going to add a way for our users to select the task status.
[2:29] Since we have only three options, to do, in progress, and done, we are going to use a selector component here. Ionic has the ion segment that will let me just create a toolbar segment where I can choose which item I want.
[2:45] I'm going to bind it to the task.status. For the ion segment, I want to create three ion segment buttons. The first one is going to have the value of todo and it's going to have the label of todo. I also want to dynamically add a class of selected status if the status matches this value right here.
[3:08] You see how it appears here on the screen. Now, I want to do the same for both in progress and done. I create a new segment button that's going to have the value of in progress, the other one's going to have the value of done. I'm going to also dynamically add the classes depending if they are the selected button.
[3:31] Now, you see that here I can select them and whichever it is that I am selecting has both the underscore and the text color changes. You'll have access to all of these CSS when you get the application repo. Lastly, for our template, I want to add a footer where I'm going to have a button called save task.