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

Component & HTML Designs

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

Day 2 has begun and zeal is on. Today we will focus on designing the basic components required in the application. I figured out following components would be needed.

Components

  • App (Layout)
  • Sidebar
  • Navbar
  • Search bar
  • Goals
  • Goal Editor
  • Planner
  • Planner Header
  • Planner Footer
  • Tasks
  • Task
  • Tags
  • Tag
  • Calendar
  • Progress bar

There correlation is shown in the below diagram. There may be more components but since we are doing it first time with half baked design, so we can ignore it for now. Well that’s the beauty of working in Agile.

Component Architecture

We will take each component one by one and will develop its UI and codebase. At first we will pick up Layout.

Layout Component

After adding layout component and sidebar
  1. Delete all the files starting with app.*. We don’t need these files. We will create our own components and will use them in the application.
  2. Let’s create layout first. So create a new folder under ‘app’ folder and call it ‘layout’.
  3. Now create files in layout folder:

layout.component.html

This file is simply layout container of our entire app. We will placing next level dependent components over here.

layout.component.ts

This is layout component definition file. It export component as a class and declares the properties of the component.

  • moduleId — For relative path for dependent files
  • selector — The selector it has to replace
  • templateUrl — file name of html for this component
layout.component.ts

layout.module.ts

It defines the layout module definition.

layout.module.ts

And modify main.ts file

main.ts

Since we deleted the app component and bring layout component in picture, so update main typescript file to get the reference of layout component.

main.ts

Updated Index.html

Since html and css are beyond the scope of this tutorial series, so please use as it is and you can modify as per your need.

index.html

Styles.css

styles.css

Journey Links: