Learn #Angular JS2 with Paras Mendiratta in 31 days — Day #12
Enhancing Goal Editor
For those who are coming first time to my this blog: We are building an online planner similar to Google Keep. You can see more details over here: Tutorial Series
Today we will be working on following things:-
- Task Model and Service
- Binding Task Class in Goal Editor Component
- Adding new tasks in the Goal
- Updating Goal Progress in Goal Editor View — on marking task as complete/in-complete
[A] — Task Model
The task model is simple representation of task properties. It will have unique id, title, whether completed, creation, updation and completion time etc. information. See the class definition below:-
[B] — Task Mock Data
Let’s add some mock data for Task objects
[C] — Task Service Class
Task service layer class will help us to interact with a task or group of tasks. I have created some helper methods for sorting: dynamicSort and dynamicSortMultiple. However, as of now we will needing only getTasks method: a method simply returning a promise of hard-coded tasks.
[D] — Binding Task Model with Goal Editor
We can get the task using service class in EditorComponent. To do we just need to call the service class method on ngInit. See the code below:-
Now we already have the tasks with us. Now next thing is we need to bind this in HTML to display the task. For that we will first split the list into two separate lists:
- Completed Tasks
- Pending Tasks
Then using *ngFor directive, we will iterating the task in HTML code. In editor.component.ts file define the variables and respective methods:-
Now since we have list ready; let’s bind it in HTML. See the code below for pending tasks
Completed Task HTML
As you can see, I have placed some code on mouseover and mouseout event. Well that’s I have bind these two events for displaying the move icon and delete icon for the respective task.
[E] — Marking Task as Complete / Incomplete
We have displayed the task list, now how to update the list when user check/uncheck the task item. Well, just simply make function and call it when user clicks on the task item. See the code below:-
Handle the click event:-
Just make sure to rebuild the task on updating the task items. Well this will updates the list automatically in the view.
[F] — Adding New Task
Adding new task is also very simple. See the HTML code below.
In Angular JS2, it is easy to capture the event and also to add key filter with in the HTML code. For enter key: code will be:
Now let’s define the addTask method in component file. While creating a new task, we will assign random ID to it and properties to it. In future, these properties will move to service class. But for now, let’s keep it here.
Don’t forget to call buildTasks method after adding new task in the list. If you don’t call it then list will not refreshed.
[G] — Updating Goal Progress
Last thing left for today is to update the goal progress. Remember, earlier we defined the goalProgress variable in the editor component. We are already updating it in while rebuilding tasks. Just bind it in HTML. See the code below for it.
That’s all for today. Tomorrow, we will be discussing about showing and hiding goal editor layout. Also, we should be checking how we can open specific goal and populate its task in the goal editor.
Download Code for Day #12
Journey Links:
- Gear up: Prologue
- Day #1: Introduction to AngularJS 2
- Day #2: Component & HTML Designs
- Day #3: Introduction to NgModule
- Day #4: Introduction to Components
- Day #5: Introduction to Directives
- Day #6: Revisit Planner HTML
- Day #7: Revisit Planner Component — Communicating between components within Module
- Day #8: Introduction to Pipes
- Day #9: Building GoalManagerComponent & GoalComponent
- Day #10: Goal Model and Goal Service Layer
- Day #11: Task Model and Goal Editor
- Day #12: Enhancing Goal Editor
- Day #13: Managing Goals
- Day #14: Displaying TaskList in GoalManager View
- Day #15: Syncing, Copying and Deleting Goals
