Before building the actual component, we need to set up our work environment first and in order to do so, we will reuse the same HTML boilerplate file we used in the previous component. Please set aside the work you've done so far and keep the package.json, tsconfig.json, typings.json, and index.html files we used in previous examples. Feel free to reinstall the modules required in case you need to, and replace the contents of the body tag in our index.html template:

<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    <div class="navbar-header">
      <strong class="navbar-brand">My Tasks</strong>
    </div>
  </div>
</nav>
<tasks></tasks>

In a nutshell, we have just updated the title of the header layout above our new <tasks> custom elements, which replaces the previous <timer>. You might want to update the app.module.ts file and make sure to point out tasks as a component that can be visible outside of our module by entering it in the exports key array:

@NgModule({
  declarations : [ TasksComponent ],
  imports : [ ],
  providers : [],
  exports : [ TasksComponent ]
})
export class TaskModule{}

Let's highlight here that the application has two modules so far: our root module called AppModule and our TaskModule. Our root module should import our TaskModule like so:

@NgModule({
  imports : [
    BrowserModule,
    TaskModule
  ]
})
export class AppModule {}