Learn #Angular JS2 with Paras Mendiratta in 31 days — Day #11
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
Yesterday, we created the Goal model. GoalManager is displaying the goals. Allowing us to manage the priorities of goals. But to edit the goal and associated tasks, we need an editor. Let’s create one and call it GoalEditor.
We will creating editor module and associated components and files.
[A] — Editor Module
Let’s create editor module. Why we are taking editor as module rather than as individual component? Well, right now we do planning to have only one component in this module but in near future we will be dividing the editor component into sub-components and that time we would like to use import single module rather than importing multiple modules.
This will help us to avoid importing/removing components from different modules. We just need to alter the editor module to add/remove components from it.
Editor module code is very simple and similar to other modules. Let’s import:-
SDCommonModule— contains common module references
PlannerModule— During editing goal, we will be displaying the planner also. User can drag & drop the tasks to planner.
EditorComponent— Editor component needs to be declared and then exported for use.
See the code below for
[B] — Editor Component
Next thing that we need to do is to define the Editor Component. We will be having one private boolean variable:
showCompletedTasks = false Initially it will be set to false. This is needed to maintain that state that whether the completed tasks should be visible on the screen.
Apart from this we will having following functions:-
onTapped— Will be called when user taps on the screen.
onGoalEditorTapped— Will be called when user taps on GoalEditor
toggleShowCompletedTasks— Will be called when user taps on show/hide completed task button.
When user taps on show/hide completed task button then we need to do two things:
- Rotate the icon by 90 degree
- Show/Hide the task
See the code below for complete functionality:
[C] — Editor Template
Module and Component is ready, now let’s create template for our editor. Though explaining CSS and HTML is beyond the scope of this blog series but let’s me try to put the things into words…
Well we are dividing out editor into multiple layers:-
- Overlay Layer — which will actually hide the existing goals and planner
- Planner & Goal Layer
Goal Layer will further have:-
- Pending Task List
- Add New Task
- Show/Hide Completed Task
- Completed Task
See the HTML code and stylesheet code shown below:-
[D] — Editor Stylesheet
Well that’s all for today. As of now tasks are hard coded and there is no special thing in that. However, you can tap on show/hide completed task button and can see that it is working well. Tomorrow, we will focus on creating Task Model and enhancing Goal Editor to add new task and as well to manage existing tasks. You can download the code from given link.
Download Code for Day #11
- 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: Goal Editor
- Day #12: Enhancing Goal Editor & Task Model
- Day #13: Managing Goals
- Day #14: Displaying TaskList in GoalManager View
- Day #15: Syncing, Copying and Deleting Goals