Learn #Angular JS2 with Paras Mendiratta in 31 days — Day #12

Enhancing Goal Editor

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:-

  1. Task Model and Service
  2. Binding Task Class in Goal Editor Component
  3. Adding new tasks in the Goal
  4. 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:-

Task Model — task.model.ts

[B] — Task Mock Data

Let’s add some mock data for Task objects

Task Mock Data — task.mock.ts

[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.

Task Service Class — task.service.ts

[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:

  1. Completed Tasks
  2. 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

Pending Tasks List

Completed Task HTML

Completed Tasks List and Display Component

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.

Journey Links: